Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

[Resolved]Css Configuration For Html Page

HTML CSS

Best Answer LDDbyD, 27 July 2012 - 01:28 AM

No answer...
I finaly found by myself. Go to the full post


  • Please log in to reply
1 reply to this topic

#1 LDDbyD

LDDbyD

    CC Regular

  • Member
  • PipPipPip
  • 35 posts
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, PL/SQL, Visual Basic .NET, Others
  • Learning:C, Java, C++, C#, PHP, JavaScript, Visual Basic .NET, Others

Posted 09 May 2012 - 05:14 AM

Hello every body,
I'm not really new here, but I come back...

I code a new site and CSS is not my cup of the, so I try to configure 2 floats to be side by side, but all I've tried doesn't work... The only thing that works but not like I want is to put floats in %, but if the guy who wants to visite my site hase a bigger screen as mine the page is gonna change and i would like to fixe "navigation" and "more stuff" part side by side with "content": when I change the configuration "navigation" and "more stuff" goes down, under "content"...

I let you look the code and propose me something if you have an idea:

Here the CSS code (styles.css):
html,body{
margin:0;
padding:0}
body{
font: 76% arial,sans-serif;
text-align:center}
p{
margin:0 10px 10px}
a{
padding:5px;
text-decoration:none;
color:#000000;}
div#page{
height: 100%;
width: 100%;}
div#header{
background-color:#F3F2ED;}
div#header h1{
height:80px;
line-height:80px;
margin:0;
padding-left:10px;}
div#container{
text-align:left}
div#content p{
line-height:1.4}
div#navigation{
background:#F6F0E0;}
div#navigation ul{
margin:15px 0;
padding:0;
list-style-type:none;}
div#navigation li{
margin-bottom:5px;}
div#extra{
background:#CCC8B3;}
div#footer{
background:#BFBD93;}
div#footer p{
margin:0;
padding:5px 10px}
div#container{
width:100%;
margin:0 auto}
div#navigation{
float:left;
clear: left;
width:15%}
div#extra{
float:left;
clear:left;
width:15%}
div#content{
float: right;
width:85%;}
div#footer{
clear:both;
width:100%}

and here the HTML code (index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<div id="page">
<head>
<title>Free Css Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="container">
<div id="header"><h1><a href="http://www.free-css.com/free-css-layouts.php">Free CSS Layouts</a></h1></div>
<div id="wrapper">
	<div id="content">
	 <p><strong>Content here.</strong></p>
	 <p>Sapibulumnibh phasellus nulla egestibulum enim pretium elit tincidunt estiquam ultrisque donectetur. Sedcondimentumsan odio hendrerit proin vitae dignis nibh ac justo id congue. Amesintesque vel curabitae volutpat donec alique nasceleifendimentesque montesque rhoncus quis eros. Vestnunc nonummy</p>
	 <p>Montegeraliquam sed pede in cursus praesenec vestas rhoncus wisi at wisi. Condisseloborttis enim et ipsum mauristie id felit adipiscipit ac auctortorttitor sempor. Vitantesqueat sempus non sed et mus sit vivamus purus netus hendiment. Pretiuma diam et id tempus dolor por wisi sed volutpat facilisi.</p>
	 <p>Wisiet sus adipit phasellentum elit condissim consecteturpiscing sapien vivamus et congue. Utvel tris quismod cursus liberos elit nisse curabitur tur parturpis tellenterdum. Semperligula curabitae tellentesque nulla trices vestas ristibulum id justo auctor facinia. Natisdonec consequat nibh pellus.</p>
	 <p>Vestibusodio euisque id elerisus lacus tincidunt sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p>
	</div>
</div>
<div id="navigation">
	<p><strong>Navigation Here</strong></p>
	<ul>
	 <li><a href="http://www.free-css.com/">Free CSS Templates</a></li>
	 <li><a href="http://www.free-css.com/free-css-layouts.php">Free CSS Layouts</a></li>
	</ul>
</div>
<div id="extra">
	<p><strong>More stuff here.</strong></p>
	<p>sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p>
</div>
<div id="footer">
	<p>Footer</p>
</div>
</div>
</body>
<div>
</html>

It's nearly what I want, it miss just the fix size and position of the menu ("navigation" and "more stuff")

Thanks.

LDDbyD
  • 0

#2 LDDbyD

LDDbyD

    CC Regular

  • Member
  • PipPipPip
  • 35 posts
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, PL/SQL, Visual Basic .NET, Others
  • Learning:C, Java, C++, C#, PHP, JavaScript, Visual Basic .NET, Others

Posted 27 July 2012 - 01:28 AM   Best Answer

No answer...
I finaly found by myself.
  • 0





Also tagged with one or more of these keywords: HTML, CSS

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download