PDA

Click to See Complete Forum and Search --> : New to CSS/DIV tags trying to learn basics.

royhobbs
09-18-2009, 07:09 PM
ok i put together 2 very basic samples of issues i am having when i am writing sites built on div tags and css. i am a master at html but when it comes to <div> i am a idiot. i am trying to learn/master it but i need to learn some basic concepts and my biggest issues come from spacing and browser compatability. anyway i appreciate you looking at this and you probably laugh at my post but these basic samples if understand them, when corrected, i can use this logic to help me in a legit site. thanks for looking.

http://www.raydworkshop.com/css/1/ - this one the ?S are on the link... simple spacing issue. cant figure it out for the life of me but its so basic.

http://www.raydworkshop.com/css/1/2.html - i basically want it to look like my HTML sample, but i dont know how a "Rowspan" issue can be achieved in the CSS world. all i know is DIV tags are up and down, much like the <tr> and <span> tags are more like <td> but well again sorry for being so stupid.

Thanks for looking Roy.
masonite
09-20-2009, 03:41 AM
One thing to note: don't use the same ID more than once on a page. You can use classes over and over on the same page.

In the first example, you can get rid of the bottom black strip with

img {vertical-align: bottom;}

but the right hand black gap does seem to be caused by the two images being on separate lines. You don't need the spans at all. They are doing nothing.

In the second example, you place divs where you want with floats. Here's an example of how you would re-create that table layout with a div:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>

<style type="text/css">

#box {width: 400px;}
img {border:0;vertical-align:bottom}
img.left {float: left;}
img.right {float: right;}

* {margin: 0; padding:0;}

</style>
</head>

<body>

<div id="box">
<img class="left" src="img/box-b.jpg"><img class="right" src="img/box-g.jpg"><img class="left" src="img/box-r.jpg">
</div>
</body>
</html>


There are other ways to do this, too.
masonite
09-20-2009, 04:17 AM
PS

In the first example, you could do this if you wanted the images to remain on separate lines in the HTML:


.nav {
width: 500;
padding: 0px 0;
background-color: #1b2127;
overflow: hidden;
}

* {margin:0; padding:0;}

img {float: left}
royhobbs
09-23-2009, 04:33 PM
is there a way to get rid of the space on the right other than putting the two images on same line? my sample was to depict a bunch of graphic links, if i had like 5 and had to assign links (<a href=""></a>) to all of them, and the only way to get rid of this space was to put them all on one line it would get pretty difficult to update etc. is there any other way or is this just the way it is?

THANKS! you have been a big help!

One thing to note: don't use the same ID more than once on a page. You can use classes over and over on the same page.

In the first example, you can get rid of the bottom black strip with

img {vertical-align: bottom;}

but the right hand black gap does seem to be caused by the two images being on separate lines. You don't need the spans at all. They are doing nothing.

In the second example, you place divs where you want with floats. Here's an example of how you would re-create that table layout with a div:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>

<style type="text/css">

#box {width: 400px;}
img {border:0;vertical-align:bottom}
img.left {float: left;}
img.right {float: right;}

* {margin: 0; padding:0;}

</style>
</head>

<body>

<div id="box">
<img class="left" src="img/box-b.jpg"><img class="right" src="img/box-g.jpg"><img class="left" src="img/box-r.jpg">
</div>
</body>
</html>


There are other ways to do this, too.
royhobbs
09-23-2009, 04:34 PM
NEVERMIND i didnt read below. thanks! your the man!
royhobbs
09-23-2009, 04:39 PM
actually this doesnt work if you look at my sample and look at your code and compare, there are gaps. i want them to be exact. basically i am trying to create something similar that can easily be done in standard html, with 2 columns and 1 column having two rows. anyone?

One thing to note: don't use the same ID more than once on a page. You can use classes over and over on the same page.

In the first example, you can get rid of the bottom black strip with

img {vertical-align: bottom;}

but the right hand black gap does seem to be caused by the two images being on separate lines. You don't need the spans at all. They are doing nothing.

In the second example, you place divs where you want with floats. Here's an example of how you would re-create that table layout with a div:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>

<style type="text/css">

#box {width: 400px;}
img {border:0;vertical-align:bottom}
img.left {float: left;}
img.right {float: right;}

* {margin: 0; padding:0;}

</style>
</head>

<body>

<div id="box">
<img class="left" src="img/box-b.jpg"><img class="right" src="img/box-g.jpg"><img class="left" src="img/box-r.jpg">
</div>
</body>
</html>


There are other ways to do this, too.
masonite
09-23-2009, 07:13 PM
Huh, sorry Roy. I only tested it in firefox, but I see that IE was still a mess.

I'm a bit stumped on why IE is adding those gaps. As you say, an unpleasant fix is to have the images on one line. There is a cheeky way around this, as shown below, but I don't really like it myself. Still, it seems to work:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css">
.nav {
width: 500px;
padding: 0;
background-color: #1b2127;
}

* {margin:0; padding:0;}

img {border:none; vertical-align: bottom;}

</style>
</head>

<body>

<div class="nav">
<img class="a" src="img/g.jpg" width="200" height="20" border="0" alt=""><img
class="a" src="img/b.jpg" width="200" height="20" border="0" alt="">
</div>

</body>
</html>
leahmarie
09-24-2009, 02:37 AM
Have you tried conditional statements in CSS files. For the browsers IE 6, IE 7, IE 8? I forgot the link of it
leahmarie
09-24-2009, 02:40 AM
..
nathandelane
09-30-2009, 12:38 AM
Quickly you shouldn't use conditional CSS. Let me read the rest of the thread and maybe I can help.
JAKWebDesign
09-30-2009, 12:20 PM
make your CSS this, and leave your html alone and this works in all browsers

*{padding:0; margin:0;}

#nav {
width: 500;
padding: 0px 0;
background-color: #1b2127
}

img{float:left; width:200px; margin:10px 0 0 0; }