Jump to content


How to code this?


3 replies to this topic

#1 Extinct

    Young Padawan

  • Members
  • Pip
  • 27 posts
  • Gender:Male
  • Location:USA

Posted 15 October 2006 - 02:52 AM

I would just want to say Hello to everyone since this is my first post.

My problem is I want to code this:
Posted Image
*That is not my real image just an example :)

But I can't because I am not so good at XHTML/CSS coding with divs and CSS instead of tables and I really want to learn.

I tried to code that in just divs but I always get it like this:
Posted Image

Could anyone help me with this how to code this with divs?

#2 God

    Young Padawan

  • Members
  • Pip
  • 80 posts
  • Gender:Male
  • Location:Australia
  • Interests:You all suck at life. (Mished.net)

Posted 23 October 2006 - 02:46 AM

I guess this would do the trick.

It came out fine in both IE and Firefox :)

<html>
<head>
<style type="text/css" media="screen">
body {
	text-align: center;
	font-family: verdana;
	font-size: 11px;
}

.container {
	background-color: #111111;
	width: 900px;
	margin: 0px auto 0px auto;
}

.right-side {
	float: right;
	width: 160px;
	color: #FFFFFF;
}

.left-side {
	float: left;
	width: 160px;
	color: #FFFFFF;
}

.right-side2 {
	background-color: #FFFFFF;
	float: right;
	width: 180px;
}

.left-side2 {
	background-color: #FFFFFF;
	float: left;
	width: 180px;
}

.content {
	margin: 0px 165px 0px 165px;
}

.content2 {
	margin: 0px 185px 0px 185px;
	color: #FFFFFF;
}

.viewall {
	background-color: #111111;
	color: #FFFFFF;
	text-align: right;
}
</style>
</head>

<body>

<div class="container">

	<div class="right-side">
		<div style="padding: 10px;">your right side bar side bar</div>
	</div>
	
	<div class="left-side">
		<div style="padding: 10px;">your right side bar side bar</div>
	</div>
	
	<div class="content">
	
		<div class="right-side2">
			<div style="padding: 10px;">your right side bar side bar</div>
			<div class="viewall">view all</div>
		</div>
		
		<div class="left-side2">
			<div style="padding: 10px;">your right side bar side bar</div>
			<div class="viewall">view all</div>
		</div>
		
		<div class="content2">
			<div style="padding: 10px;">your login</div>
		</div>
	
	</div>
	
	<div style="clear: both;"></div>

</div>

</body>
</html>


#3 Extinct

    Young Padawan

  • Members
  • Pip
  • 27 posts
  • Gender:Male
  • Location:USA

Posted 23 October 2006 - 10:25 AM

Thanks, that did the job :)

#4 cheerio

    Young Padawan

  • Members
  • Pip
  • 246 posts
  • Gender:Male

Posted 23 October 2006 - 01:55 PM

It's all in the floats and margins..in my opinion





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users