Zymic Forums

Webmaster resources

Zymic IRC Server

Chat in real time at irc.zymic.com - Learn More

Welcome

Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.

In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.

left Zymic Webmaster ForumsWeb Design & DevelopmentClient Side ScriptingHTML and CSS right
left
Coding Html/css Layout. No Images.
 right
k.digennaro
post Jul 31 2008, 08:13 PM
Post #1


Outrageously Uber Ninja
*******

Group: Members
Posts: 840
Joined: 30-March 08
From: Cincinnati, OH
Member No.: 16,073
Hey all finnaly after 3months of trying my coding skills are starting to fall into place. Instead of using tags etc because people say to use them I'm understanding why there used. Thanks to everyone whos helped me.

Anyways back on topic, I'm coding a fully HTML/CSS layout without images right now and I need a little help. I've basically got the layout coded except for the middle section (content area) as you see in the image below there's supposed to be a black line on the right and left of the content box, I can't seem to get it to work on the same line, everytime I code it the design is either on top of each other, or vertical instead of horizontal. The image belows what I'm trying to code. It seems like I don't fully understand how to "pad" an object. because everytime I do it. it doesn't move, I've read through tuts on padding etc, I do what I think is exactly what they do but mine doesn't work.
*note recently I started coding the CSS inside the HTML just while I'm coding it, later ill paste the CSS into another document. I just like having it on the same page for convience*



* I realize this is a really simple layout not even a great design, I'm just building it for learning purposes.
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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

body{
background-color:#777777;
margin:0 0;
padding:0 0;
}

#headerblack{
background-color:#000000;
width:70%;
height:50px;
margin:0 0;
padding:0 0;
}

#headerwhite{
background-color:#ffffff;
width:70%;
height:50px;
margin:0 0;
padding:0 0;
border:2px black solid;
}

#sideleft{
background-color:#000000;
width:20px;
height:75%;
background-repeat:no-repeat
}

#sideright{
background-color:#000000;
width:20px;
height:75%;
background-repeat:no-repeat;
}

#navbar{
background-color:#ffffff;
width:100px;
height:150px;
border: 2px black solid;
left:100px;
background-repeat:no-repeat
}

#footerwhite{
background-color:#ffffff;
width:70%;
height:25px;
margin:0 0;
padding:0 0;
border:2px black solid;
background-repeat:no-repeat
}

#footerblack{
background-color:#000000;
width:70%;
height:25px;
margin:0 0;
padding:0 0;
background-repeat:no-repeat
}

#content{
background-color:#555555;
width:50%;
heigth:75%;
background-repeat:no-repeat
}


</style>
</head>
<body>
  
    <div id="headerblack">
   </div>
  
    <div id="headerwhite">
    </div>
  
    <div id="sideleft">
    <div id="content">
    <div id="sideright">
  </div>
    </div>
    </div>
    
    <div id="footerwhite">
   </div>
  
    <div id="footerblack">
    </div>

</body>
</html>


Thanks for any help,
Kevin
Go to the top of the page 
 
  + Quote Post
 
 Start new topic
Replies
Andrew
post Aug 2 2008, 02:49 AM
Post #2


Hosting Abuse Staff
*******

Group: Moderators
Posts: 2,933
Joined: 14-February 08
From: Fort Myers FL, USA
Member No.: 10,089
You also have to set float left and float right.

But I still couldn't figure it out.

So here is a site that has it done for you! lmao
http://www.glish.com/css/2.asp

I edited it to make it look like what you had going:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : 3 columns, all fluid</title>

<style type="text/css">
@import "all.css"; /* just some basic formatting, no layout stuff */

body {
margin:10px 10px 0px 10px;
padding:0px;
color: #99CC33;
background: #000099;
}

#mainright {
width:33%;
float:left;
background:#000000;
padding-bottom:10px;
}

#maincenter {
width:34%;
float:left;
background:#555555;
padding-bottom:10px;
}

#mainleft {
width:33%;
float:left;
background:#000000;
padding-bottom:10px;
}

#banner {
background:#000000;
padding: -2px;
border:2px white solid;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

h1 {
font-size:14px;
padding-top:10px;
}

#mainright p { font-size:10px}
#banner h1 { margin:0px; padding:10px}

</style>
</head><body>
<div id="banner"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 3 columns, all fluid</h1></div>
<div id="banner"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 3 columns, all fluid</h1></div>

<div id="mainleft">
<h1>mainleft</h1>
<pre>#mainleft {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}</pre>
<p class="greek">
Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. Media sourcing as an acquistion strategy is counterproductive in a internet environment in virtual component methodology. Imaging through ideals rather than real world branding, is a perilous undertaking with negative results. Branding strategies generating motion as activity without reproducible results is a ultimately futile effort if left in place.
</p>
</div>

<div id="maincenter">
<h1>maincenter</h1>
<pre>#maincenter {
width:34%;
float:left;
background:#fff;
padding-bottom:10px;
}</pre>
<p>A much simpler and potentially more useful technique that then <a class="sitelinksredorange layout" href="8.asp">4 column technique</a> using float:left instead of position:absloute. It suffers from needing percentage widths for each column, and from potential column wrapping when the browser window is narrowed.</p>
<p><strong>Scroll down for the source.</strong></p>
<p class="greek">Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing on core suitability and cross-training. </p>
</div>

<div id="mainright">
<h1>mainright</h1>
<pre>#mainright {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}</pre>
<p>
This page is part of <a href="home.asp">CSS Layout Techniques</a>, a resource for web developers and designers.
</p>
<p>
Other Layout Techniques:<br/>
<a href="7.asp">3 columns, the holy grail</a><br/>
<a href="9.asp">2 columns, ALA style</a><br/>
<a href="8.asp">4 columns, all fluid</a><br/>
<a href="2.asp">3 columns, all fluid </a><br/>
<a href="3.asp">static width and centered</a><br/>
<a href="1.asp">nested float</a><br/>
</p>
<p>
Does it <a href="http://validator.w3.org/check?uri=http://www.glish.com/css/2.asp?noSRC=true">validate</a>?
</p>

</div>
<div style="clear:both;"></div>
<div id="banner"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 3 columns, all fluid</h1></div>
<div id="banner"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 3 columns, all fluid</h1></div>

</body>
</html>
Go to the top of the page 
 
  + Quote Post

Posts in this topic
k.digennaro   Coding Html/css Layout. No Images.   Jul 31 2008, 08:13 PM
Trippin7464   I'm messing around with it right now, but the ...   Jul 31 2008, 09:24 PM
k.digennaro   thanks for the help tripping, lol i cant beleive i...   Jul 31 2008, 10:15 PM
prixat   Hi Kevin I noticed some convoluted nesting in tha...   Aug 1 2008, 09:20 AM
Trippin7464   You also have to set float left and float right. ...   Aug 2 2008, 02:49 AM
k.digennaro   thanks trip, that helped alot, im having a problem...   Aug 2 2008, 08:19 PM
prixat   Hi Kevin I modified your code but not using 3 col...   Aug 2 2008, 11:35 PM
halwits   I think its a very interesting and nice code so th...   Aug 18 2011, 05:57 AM
Trippin7464   I'm assuming he wants sidebars otherwise he wo...   Aug 3 2008, 09:11 AM
k.digennaro   thanks guys, @prixat: thanks for the tips ill have...   Aug 3 2008, 07:35 PM
timpane   I believe he's just seeking to conceive a layo...   Oct 3 2011, 04:28 PM

« Next Oldest · HTML and CSS · Next Newest »
 
 Reply to this topic Start new topic
left
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
 right
0 Members:
left
Forum Jump
 right
 
Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

Lo-Fi Version Time is now: 20th May 2013 - 03:14 AM
Powered By IP.Board 2.2.2 © 2013  IPS, Inc.