Html Question [Archive]

View Full Version : Html Question

Kon-Tiki

30-01-2006, 10:00 AM

I've come across something odd. I got text and an image, and I want to align the text to the middle of the image (so that it comes at the middle height of the image), the image should be aligned left and the text centered. For some reason, this's harder than it sounds, as the img-tag's align attribute apparently can only take one parameter, which's either middle or left, but not both, nor's it take two allign attributes. Anybody know how I can still do this? Thanks in advance

Reup

30-01-2006, 11:08 AM

Use css!

<html>
<head>
<style type="text/css">
img.middle {vertical-align:middle}
</style>
</head>

<body>
<p>
This is an
<img class="top" border="0"
src="logocss.gif" width="95" height="84" />
inside a paragraph with centered text.
</p>

</body></html>

Check out:
this example (http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align). If you change the code to the stuff above, you'll see the text aligned to the center of the image (or rather: the image is aligned to the text with its center).

Kon-Tiki

30-01-2006, 11:39 AM

I got that far, but we fixed it now. We set the image as a background image, aligned it left and set the repeat on no repeat. It works now, under Firefox. IE aligns the text at top, though.

Another thing I want to know, is if it's possible to make links target a div. Like if I have a menu div, and all choices need to load in the contents div. Is this even possible?

Kon-Tiki

30-01-2006, 02:20 PM

Double post :whistle: But woohoo! Found it :D Some CSS, using submit-buttons and readfile() does wonders :)

Reup

30-01-2006, 03:04 PM

You can change the content of any HTML-element, so a <DIV> as well, through the DOM-model. This is kind of tricky, but with a little bit of patience can be done.

Check out: http://www.quirksmode.org/ for a very very indepth tutorial about that.
You could also use element.innerHTML to modify the contents. Quirksmode offers a comparison between the two ways as well. It's an excellent site.

Kon-Tiki

30-01-2006, 04:28 PM

I used submit-buttons, disguised as links through CSS (taking away their border, adding a hover-element... which doesn't work under IE, but does under Firefox), used a switch-statement to check for the value sent by those buttons and used readfile() accordingly to load a file into the div. 's That come close to the DOM model, or did I make one of my own? :D

Reup

30-01-2006, 06:01 PM

Mmm... sounds weird :D But hey, if it works... On the other hand, if you had used DOM, it would have worked in most browsers...

Another good site: http://www.csszengarden.com/

Wicked CSS :ok:

Kon-Tiki

30-01-2006, 07:31 PM

Hehe, we've seen CSSZenGarden in class... in that one hour we've seen CSS. Good thing I'm good with self-study (especially during especially boring Dreamweaver classes :whistle: That and during exercise days), or that'd've been all I'd've seen of CSS :D I'll look into DOM tomorrow, though. We'll be done with the end exercise waaaaay too soon, anyways, so I'll have time with heaps (or so I think I will)

plix

30-01-2006, 09:20 PM

Originally posted by Kon-Tiki@Jan 30 2006, 12:28 PM
I used submit-buttons, disguised as links through CSS (taking away their border, adding a hover-element... which doesn't work under IE, but does under Firefox), used a switch-statement to check for the value sent by those buttons and used readfile() accordingly to load a file into the div. 's That come close to the DOM model, or did I make one of my own? :D
I'm assuming that readfile() refers to PHP's readfile() function (the language really doesn't matter; I'm just taking it to mean server-side). As such, using a button rather than a link to do such a thing is rather bad form (especially if it's a POST rather than GET). PHP makes passing variables exceedingly easy and as such you probably should use something more along the lines of:

<all your html before the div>
<?php
$page = $_GET['page'];
if (is_file($page)
* readfile($page);
else
* readfile("an error page, or you could just echo an error message");
?>
<all your html after the div>

It's not pretty (the whole separation-of-presentation-from-logic ideology, etc) but you aren't trying to accomplish something terribly complex. If you use that example all your need to do is use links in the menu which contain page=thepagetoload in the query string (with a little preprocessing you can pretty that up a bit, but that's just an example, not a full-blown implementation).

Mara

08-02-2006, 07:52 PM

http://www.w3.org/
html as it sould be used :)

stick to it to avoid problems like "works on ie and not on firefox"

-> the usefull thing is a html validator to check your pages ;) Same goes for css.

then you can google for solution if nedeeed ;)

Data

08-02-2006, 08:07 PM

Originally posted by Mara@Feb 8 2006, 09:52 PM
http://www.w3.org/
html as it sould be used :)

stick to it to avoid problems like "works on ie and not on firefox"

if only all browsers supported that recommendation........

D.

Mara

09-02-2006, 01:24 PM

so true ;)

IE mainly dosn"t like folowing the rules ;)

plix

09-02-2006, 02:50 PM

Originally posted by Mara@Feb 9 2006, 09:24 AM
IE mainly dosn"t like folowing the rules ;)
...and IE still represents more than 80% of the market.

Mara

09-02-2006, 06:06 PM

though firefox is used more and more.

the best way with site -> do simple, and stay in the norms ;)

My site work perfectly the same opn IE and firefox ;)

I had a problem with Ie not displaying it ok, got solve during the whole validation proces (I think it was because of <td> or <tr> i had forgotten. For once, IE was the one seeing the problems.

Kon-Tiki

15-02-2006, 11:38 PM

Ok, got another set of questions.

1) I have a stretchy contents div with a 1px wide background (which repeats when stretched). At the left of it is a menu div. What I want it to do, is stretch to the size of the menu div if the contents in the contents div isn't long enough to automatically stretch as much. Otherwise, the menu'll run over and past the footer, and it looks behind-ugly.

I got this working under IE, but Firefox seems to add a few white lines between the menu/contents and the footer. This's my CSS for it:

div.header {
*background-image:url('img/header.png');
*width: 1024px;
*height: 343px;
}

div.menu {
*position: static;
*background: url('img/kwmainbar.png');
*top: 343px;
*left: 8px;
*width: 1013px;
}

div.contents {
*position: static;
*background: url('img/kwmainbar.png');
*left: 8px;
*top: 343px;
*width: 1013px;
*padding-left: 133px;
*padding-right: 133px; *
*text-align: justify;
}

div.footer {
*width: 1016px;
*height: 147px;
*background-image:url('img/footer.png');
}

2) My menu uses input type="image" buttons, and parsing them's no problem... under Firefox. Why doesn't IE get a value through from them? It's a bit of an oddity, as the code works perfectly fine under Firefox.

Mara

16-02-2006, 08:24 AM

We would need the html code and the adresse

Kon-Tiki

16-02-2006, 10:25 AM

Ok, quick copy-paste of the code:

<html>
<head>
<link rel="stylesheet" type="text/css"
href="kawaii_wigs.css" />
</head>
<body>

<div class="header"></div>

<div class="contents">
<?php

$menu_input = $_POST["menu_input"];

include_once("connection.php");

switch ($menu_input) {
*case "ordering":
* *include("ordering.php");
break;
*case "gallery":
* *include("gallery.php");
break;
*case "quotes":
* *include("quotes.php");
break;
*case "schedule":
* *include("schedule.php");
break;
*case "wigs":
* *include("wigs.php");
break;
*case "repairs":
* *include("repairs.php");
break;
*case "accesories":
* *include("accesories.php");
break;
*case "forum":
* *echo "Forum";
break;
*case "shop":
* *include("shop.php");
break;
*case "links":
* *include("links.php");
break;
*default:
* *include("home.php");
break;
}

?>
</div>

<div class="menu">
*<form name="menu" action="index.php" method="post">
* *<input type="image" src="img/button_home.png" value="home" name="menu_input" /><br>
* *<input type="image" src="img/button_ordering.png" value="ordering" name="menu_input" /><br>
* *<input type="image" src="img/button_gallery.png" value="gallery" name="menu_input" /><br>
* *<input type="image" src="img/button_quotes.png" value="quotes" name="menu_input" /><br>
* *<input type="image" src="img/button_schedule.png" value="schedule" name="menu_input" /><br>
* *<input type="image" src="img/button_wigs.png" value="wigs" name="menu_input" /><br>
* *<input type="image" src="img/button_repairs.png" value="repairs" name="menu_input" /><br>
* *<input type="image" src="img/button_accesories.png" value="accesories" name="menu_input" /><br>
* *<input type="image" src="img/button_forum.png" value="forum" name="menu_input" /><br>
* *<input type="image" src="img/button_shop.png" value="shop" name="menu_input" /><br>
* *<input type="image" src="img/button_links.png" value="links" name="menu_input" /><br>
*</form>

</div>

<div class="footer"></div>

</body>
</html>

As for the link, I uploaded it here (http://www.abandonia.com/~kon-tiki/Test/wigs/index.php). Don't mind the connection failure messages at the top. That's cause I don't have access to MySQL from there. It does show another incompatibility problem, though... I'll relist them all so far:

1) The buttons work in Firefox, but not in IE
2) The filling up the contents-div to fit at least the size of the menu works fine in IE, but gives a few white lines under Firefox
3) The error messages show that when a text's too long, it'll repeat the div's background and the text'll go outside the box under Firefox, but it'll stay nicely within boundaries in IE

Something that's in both browsers, is that the menu appears at the bottom of the stretched contents-div. It should always stay at the top of it. It'd be even better if it'd always stay in the middle left of the screen, but that'd get things too complicated for not enough gain.

Edit: The popping out the sides of the div box is fixed now. Apparently, Firefox takes the given width and adds padding, margin, etc to it, while IE takes the given width and substracts them from it. Makes no sense to me why anybody'd take such opposite approaches, but it's fixed using the standard W3C doctype tag.

Mara

16-02-2006, 01:21 PM

I tried making this kind of thigs for my website;
I gave up and use a <table> instead...

It's a real mess to make it woks properly.

after a few tries.
that sems to work better. (on firefox anyway) But I can't test it with ie.

http://chrispederick.com/work/webdeveloper/
a real time saver when you makes css :)

div.header {
background-image:url('img/header.png');
width: 1024px;
height: 343px;
}

div.menu {
position: absolute;
background: url('img/kwmainbar.png');
top: 280px;
left: 8px;
width: 120px;
vertical-align : top;
padding-left : 10px;
}

div.contents {
position: absolute;
background: url('img/kwmainbar.png');
left: 8px;
top: 280px;
width: 1013px;
padding-left: 133px;
padding-right: 133px;
padding-bottom : 0px;
text-align: justify;

}

div.footer {
width: 1016px;
height: 147px;
background-image:url('img/footer.png');
}

Kon-Tiki

16-02-2006, 06:51 PM

Thanks for the help :) Problem still exists in IE, so it's more fiddling, but at least now I got a good tool for it (and to steal tricks from other sites... did you know that Abandonia's CSS has a class called potpis?)

Kon-Tiki

16-02-2006, 07:26 PM

Double post :whistle: Anyways...

WOOHOO!

Almost got it working under both browsers now. Just two more things and it'll be fixed.

First thing's taking care of the menu div not pushing the contents in the contents div down, the other one's getting the menu to actually work under IE.

How I fixed it so far, is by creating an extra div, which contains the background line and two embedded divs (one being the menu, one being the contents itself). Now it basically looks like this:

-- Header div --

-- Middle div --

-- Footer div --

With middle div looking like this:

-- Menu
Contents --

't Should look like this, though:

-- Menu Contents --

Will be working on that now :cheers: Good thing for that plugin. 't Showed me the way.

Edit: Oh crap, fixed that with float: left for both menu and contents and it looks exactly right under IE... but more screwed up than otherwise under Firefox :crazy:

Edit: That's fixed... to an extend. Now at least it all is placed properly, but while IE places the background just fine, Firefox refuses to fill up the background that's not occupied by anything from the contents-div, but that is occupied by the menu-div. Now to find a way that'll make the contents-div as big as the middle div, and'll push it bigger if the contents gets bigger.

Kon-Tiki

18-02-2006, 04:01 PM

My CSS's being an behind. I have these as divs:
div.header {
*background-image:url('img/header.png');
*width: 1024px;
*height: 343px;
}

div.middle {
*background: url('img/kwmainbar.png');
*top: 365px;
*left: 8px;
*width: 1013px;
*height: auto;
}

div.menu {
*padding-left: 10px;
*float: left;
}

div.contents {
*padding-left: 133px;
*padding-right: 133px; *
*text-align: justify;
}

div.footer {
*clear: left;
*top: 343px;
*left: 0px;
*width: 1016px;
*height: 147px;
*background-image:url('img/footer.png');
}

The menu- and contents-divs are subdivs of the middle-div. Now, in IE, it shows the layout as it should be shown: the contents's there, and all the parts that don't have contents, are filled up with the background image, while when the contents's bigger than the menu, it'll properly enlarge the middle div.

In Firefox, for some reason, the middle-div refuses to show the background, and the contents-div shows it instead, leaving a nice white gap between the contents-div and the footer when the contents's smaller than the menu. A clear view of what it looks like, with a box 'round each div, can be found here (http://www.abandonia.com/~kon-tiki/Friendsstuff/site_divs.png).

So my question is: Why's it passed that background on to a subdiv in Firefox?

Kon-Tiki

19-02-2006, 01:08 AM

Never y'all mind. Finally got it (well, earlier today... like in the late afternoon). Didn't know of the existence of the min-height attribute. That one's a lifesaver in my case.