SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Same line div's

  1. May 22, 2005, 12:18 #1
    MikeWasHere05
    MikeWasHere05 is offline
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Watertown
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Same line div's

    How do I make several div's on the same line? Div's seem to like putting linebreaks after themselves, how do I stop that?

    EDIT: Now I know someone will say it's impossible because it's a block level element, but I know it's not. Form is a block level element and I managed to get multiple forms on a single line once but I've lost the code

    EDIT 2: Found the form solution, display: inline, but when I add that to my div classes it voids the margin and width/height properties.
  2. May 22, 2005, 12:32 #2
    all4nerds
    all4nerds is offline
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello


    float left / right
    position relative
    position absolute

    we have to know a bit more what you like to lineup
  3. May 22, 2005, 12:43 #3
    MikeWasHere05
    MikeWasHere05 is offline
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Watertown
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello


    float left / right
    position relative
    position absolute

    we have to know a bit more what you like to lineup
    Ok, I've seem to have made some advances towards solving my problem. This is a picture of my layout (This is the Photoshop version, I am trying to make it in CSS)
    http://img263.echo.cx/my.php?image=site31mu.gif

    I'm trying to create those small opaque boxes right below the nav bar. Originally, I planned on using seperate div's for each, and just lining them up. Now, I am using a div to contain span's which make them.

    Here's my code so far:
    HTML
    Code:
    <div id="nav_top">
	<span id="nav_top1"><img src="images/spacer.gif" width="139" height="12" /></span>
	<span id="nav_top2"><img src="images/spacer.gif" width="139" height="12" /></span>
	<span id="nav_top3"><img src="images/spacer.gif" width="139" height="12" /></span>
	<span id="nav_top4"><img src="images/spacer.gif" width="139" height="12" /></span>
	<span id="nav_top5"><img src="images/spacer.gif" width="139" height="12" /></span>
</div>
    CSS
    Code:
    div#nav_top{
	height: 12px;
	width: 698px;
	margin-left: auto;
	margin-right: auto;
}
span#nav_top1{
	background: #E78D8D;
	border-color: #D7D7D7;
	border-width: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-style: solid;
}
span#nav_top2{
	background: #FFBA8C;
	border-color: #D7D7D7;
	border-width: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-style: solid;
}
span#nav_top3{
	background: #8CD1A3;
	border-color: #D7D7D7;
	border-width: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-style: solid;
}
span#nav_top4{
	background: #FFFFA3;
	border-color: #D7D7D7;
	border-width: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-style: solid;
}
span#nav_top5{
	background: #8C8CE8;
	border-color: #D7D7D7;
	border-width: 1px;
	border-top-width: 0px;
	border-style: solid;
}
    But instead of lining them up like in the picture, there is whitespace between each span tag. My question's now evolved to: How do I get rid of the spaces between span tags?

    EDIT: It also seems to make the boxes 19 pixels high, instead of the 12 I want. Nowhere do I specify 19 pixels... what can I do to fix that too?
  4. May 22, 2005, 14:39 #4
    BonRouge
    BonRouge is offline
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the image.
    ...

    Ah! Maybe I've made a mistake here - I was thinking the boxes were just for decoration (I didn't realise that that they were backgrounds for your menu (unless I'm still misunderstanding)).
    I'm sure what all4nerds has posted is good (though I haven't checked it, but
    here's an example of one way to make a menu that looks like a table to change the colours and heights of the <li>s, just give each one an id and target them like that.
    I hope this is more useful.

    Edit:

    I would have used edit tags for the above, but they make the text smaller
    Last edited by BonRouge; May 22, 2005 at 15:48.
    bonrouge

    Why using tables for layout is stupid
    HTML 4.01 | CSS 2.1
  5. May 22, 2005, 15:16 #5
    all4nerds
    all4nerds is offline
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    basic concept, if you need hovers use the a tag

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	html,body{/*html for FF Moz NS7 OP */
	text-align:center; /*IE 5 IE 5.5*/
	margin:0px;/* no margins body */
	padding:0px;/* no padding body */
	height:100%;
	width:100%;
	}
	
	div,span,p{padding:0px;margin:0px;text-align:left;/* to get text back to the left*/}
	
	img{display:block;}
	
	.borders,.nav,.navtop,.header,.sublink,.content,.footer{
	width: 701px;
	margin-left: auto;
	margin-right: auto;
	background:#13b6c9;
	}
	.header{margin-top:10px;}
	
	.sublink{
	background:#eee0c3;
	}
	.content{
	background:#bbbdc2;
	}
	
	.header,.content,.footer{padding:10px;width:681px;}
	
	.nav1,.nav2,.nav3,.nav4,.nav5,.navtop1,.navtop2,.navtop3,.navtop4,.navtop5{
	float:left;
	width:139px;
	background: #E78D8D;
	border-color: #000000;
	border-width: 1px 0px 1px 1px;
	border-style: solid;
	}
	.navtop5{border-width: 1px 1px 1px 1px;}
	
	.nav1,.nav2,.nav3,.nav4{border-width: 0px 0px 1px 1px;}
	.nav5{border-width: 0px 1px 1px 1px;}
	
	.nav2,.navtop2{background:#FFBA8C;}
	.nav3,.navtop3{background:#8CD1A3;}
	.nav4,.navtop4{background:#FFFFA3;}
	.nav5,.navtop5{background:#8C8CE8;}
	
	.work,.workr{border:1px solid #ff6600;float:left;}
	.workr{float:right;}
	
	.borders{float:left;}

	.clear{
	clear:both;
	height:1px;
	overflow:hidden;
	margin-top: -1px;/*  */
	}
	/* * html .clear{
	margin-top:-1px; 
	}*/
	</style>
</head>

<body>

<div class="header">
<div class="work">work<br /><br /></div>
<div class="clear"></div>
</div>

<div class="navtop">
<div class="borders">
<span class="navtop1"><img src="images/spacer.gif" width="139" height="12" alt="" /></span>
<span class="navtop2"><img src="images/spacer.gif" width="139" height="12" alt="" /></span>
<span class="navtop3"><img src="images/spacer.gif" width="139" height="12" alt="" /></span>
<span class="navtop4"><img src="images/spacer.gif" width="139" height="12" alt="" /></span>
<span class="navtop5"><img src="images/spacer.gif" width="139" height="12" alt="" /></span>
</div>
<div class="clear"></div>
</div>

 <div class="nav">
<div class="borders">
<span class="nav1"><img src="images/spacer.gif" width="139" height="20" alt="" /></span>
<span class="nav2"><img src="images/spacer.gif" width="139" height="20" alt="" /></span>
<span class="nav3"><img src="images/spacer.gif" width="139" height="20" alt="" /></span>
<span class="nav4"><img src="images/spacer.gif" width="139" height="20" alt="" /></span>
<span class="nav5"><img src="images/spacer.gif" width="139" height="20" alt="" /></span>
</div>
<div class="clear"></div>
</div>


<div class="sublink">
<div class="work">work<br /></div>
<div class="clear"></div>
</div>

<div class="content">
<div class="work">work<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div class="workr">workr<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div class="clear"></div>
</div>

<div class="footer">
<div class="work">work<br /><br /></div>
<div class="clear"></div>
</div><!--  -->

</body>
</html>
  6. May 22, 2005, 16:42 #6
    MikeWasHere05
    MikeWasHere05 is offline
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Watertown
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    basic concept, if you need hovers use the a tag

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	html,body{/*html for FF Moz NS7 OP */
	text-align:center; /*IE 5 IE 5.5*/
	margin:0px;/* no margins body */
	padding:0px;/* no padding body */
	height:100%;
	width:100%;
	}
	
	div,span,p{padding:0px;margin:0px;text-align:left;/* to get text back to the left*/}
	
	img{display:block;}
	
	.borders,.nav,.navtop,.header,.sublink,.content,.footer{
	width: 701px;
	margin-left: auto;
	margin-right: auto;
	background:#13b6c9;
	}
	.header{margin-top:10px;}
	
	.sublink{
	background:#eee0c3;
	}
	.content{
	background:#bbbdc2;
	}
	
	.header,.content,.footer{padding:10px;width:681px;}
	
	.nav1,.nav2,.nav3,.nav4,.nav5,.navtop1,.navtop2,.navtop3,.navtop4,.navtop5{
	float:left;
	width:139px;
	background: #E78D8D;
	border-color: #000000;
	border-width: 1px 0px 1px 1px;
	border-style: solid;
	}
	.navtop5{border-width: 1px 1px 1px 1px;}
	
	.nav1,.nav2,.nav3,.nav4{border-width: 0px 0px 1px 1px;}
	.nav5{border-width: 0px 1px 1px 1px;}
	
	.nav2,.navtop2{background:#FFBA8C;}
	.nav3,.navtop3{background:#8CD1A3;}
	.nav4,.navtop4{background:#FFFFA3;}
	.nav5,.navtop5{background:#8C8CE8;}
	
	.work,.workr{border:1px solid #ff6600;float:left;}
	.workr{float:right;}
	
	.borders{float:left;}

	.clear{
	clear:both;
	height:1px;
	overflow:hidden;
	margin-top: -1px;/*  */
	}
	/* * html .clear{
	margin-top:-1px; 
	}*/
	</style>
</head>

<body>

<div class="header">
<div class="work">work<br /><br /></div>
<div class="clear"></div>
</div>

<div class="navtop">
<div class="borders">
<span class="navtop1"><img src="images/spacer.gif" width="139" height="12" alt="" /></span>
<span class="navtop2"><img src="images/spacer.gif" width="139" height="12" alt="" /></span>
<span class="navtop3"><img src="images/spacer.gif" width="139" height="12" alt="" /></span>
<span class="navtop4"><img src="images/spacer.gif" width="139" height="12" alt="" /></span>
<span class="navtop5"><img src="images/spacer.gif" width="139" height="12" alt="" /></span>
</div>
<div class="clear"></div>
</div>

 <div class="nav">
<div class="borders">
<span class="nav1"><img src="images/spacer.gif" width="139" height="20" alt="" /></span>
<span class="nav2"><img src="images/spacer.gif" width="139" height="20" alt="" /></span>
<span class="nav3"><img src="images/spacer.gif" width="139" height="20" alt="" /></span>
<span class="nav4"><img src="images/spacer.gif" width="139" height="20" alt="" /></span>
<span class="nav5"><img src="images/spacer.gif" width="139" height="20" alt="" /></span>
</div>
<div class="clear"></div>
</div>


<div class="sublink">
<div class="work">work<br /></div>
<div class="clear"></div>
</div>

<div class="content">
<div class="work">work<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div class="workr">workr<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div class="clear"></div>
</div>

<div class="footer">
<div class="work">work<br /><br /></div>
<div class="clear"></div>
</div><!--  -->

</body>
</html>
    Thanks, that worked

« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules