CSS - The Most Versatile Layout (beginner)

Hi,
beginner question. How do I achive this

Code:

<TABLE BORDER="1" CELLPADDING="5">

in my CSS?

Thank you for your help?

Hello,

I just started trying to learn about css and html layouts by following this tutorial he
hxxp://www . subcide.com/tutorials/csslayout/page2.aspx

This is my webpage:
(link removed as issued is resolved)
but I'm having issues making the navigation look correct (not repeat and be about 50 px down)

Can someone give me a little hand. ?

cheers.



ps....errrr...I see nothing that I am doing wrong in the forum rules about the urls......

I'm an HTML+CSS beginner and I'm creating a website from a template.

The style sheet of the website defines stuff like headers as suited to the general look and feel off the website. Good. But the website allows me to post articles and the articles (which are written with an HTML editor so they use standard HTML elements) pick up those styles and they look terrible.

I think the easiest solution is for me to create some new styles in my CSS specifically for articles. Then, when I post a new article, I would add something to the article's HTML instructing it to use those new article styles instead of the general styles.

So, I tried adding this to my CSS file:
#article h1 {
color:#ffffff;
}

And I surrounded the HTML of my article with this:
<div class="article">
....the article's HTML
</div>

But this didn't have any effect on how the <h1> within the article is displayed. What am I doing wrong?

Hi all,

Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS.

Thanks for any help

Nevermind: solved

Well, I've started diving into CSS and I'm pretty intimidated by it. A lot of it seems to go counter the intuition that I could rely on as long as I worked with tables in a WYSIWYG editor, lol...

I'm trying to do something with CSS that looks darn simple, but I just can't get it to work!

I can't post hyperlinks, it seems. So you'll have to paste this URL of an explanatory picture into the address line yourself

img262.imageshack.us/img262/1278/layoutro9.jpg

Basically what I need is a two-column design:

- column on the left is fixed-width and contains some seperate containers lined up vertically; these should resize (vertically) when content requires

- column on the right is supposed to be the widest and also contains seperate containers lined up vertically; initially, the middle one of them is a picture that is resized to fit the browser window. Now it comes: I use javascript to expand the image to full-size when the user clicks it. What I want is that the column on the left is completely unaffected by this, that the picture expands to the RIGHT (going beyond browser window and can be viewed entirely by scrolling with the scrollbars), and that the container below the picture moves down with it and doesn't move below the left column.

I've been trying a couple of things but always end up with issues, most probably because I haven't given it enough time. But I'm getting frustrated quickly because this looks SO simple!!

Just to be clear: all I need is a CSS layout that arranges the 7 or 8 "boxes" correctly for this purpose.

I would be very thankful if someone could show some working code.

JoH

hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked.

I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work.

At the moment i have both elements working, although it produces two thumbnail images.

How can i use this code whilst making only one thumbnail appear?


<a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption">
<img src="images/cramps/thumbnails/ct1.jpg" border="0" />
</a>

<a class="thumbnail" href="#thumb">
<img src="images/cramps/thumbnails/ct1.jpg" border="0" />
<span><img src="images/cramps/medium size/cm1.jpg" /><br />
</span></a>

sorry if this is vague, i will answer any questions the best i can, all help appreciated!

I'm having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I'm a bit of a beginner still so maybe this is a simple fix but I've spent over a days worth of time now trying to figure it out on my own and can't seem to get it.

Just to clear this up, the links work everywhere on the page outside of the "box" element I'll list below and I've double and triple checked that the link within the "box" element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated...

This is the code that creates the box and it works correctly...
Code:

.box {
	width:831px;
	background:url(../imgs/box-spacer.gif) repeat-y;
}

.box h1 {
	background:url(../imgs/box-top.gif) no-repeat left top;
	padding-top:40px;
	font-weight: normal;
	
}

.box .last {
	background:url(../imgs/box-bottom.gif) no-repeat left bottom;
	padding-bottom:60px;
	
}
.box h1, .box p {
	padding-left:60px;
	padding-right:60px;
}

And this is the code I used to test that the page is seeing it as a link...
Code:

.box h1 a:link {
	color:#00CCFF;
}

.box h1 a:hover {
	color: #FF0066;
}

It changes the color correctly but the hover doesn't work and if you click, it doesn't link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it.

heyya,

I'm doing a quick layout, and I'm running into some problems with my floating menu.
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">

 <head>
	<style type="text/css">
		body {
			margin:0;
			padding:0;
			background-color:white;
			font:normal 1em/150% Verdana,Arial,sans-serif;
		}
		#container {
			width:750px;
			padding:0;
			margin:0;
			background:#FAA;
		}
		#contents {
			width:566px;
			margin:10px 0 0 162px;
			border:1px solid #999;
			border-bottom:none;
			padding:10px;
			background:#FFF;
		}
		#contents p {font-size:80%;line-height:150%;}
		#menu {
			width:160px;
			background:#FFA;
			margin:0;
			padding:0;
			float:left;
		}
		img {border:none}
	</style>
 </head>

 <body>
	<div id="container">
		
			<div id="menu">
				<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit. Iriure nostrud qui, vulputate ut aliquip at, amet ut, erat, consequat autem. Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
			</div>
			<div id="contents">
				<a href="#"><img src="bedroom-furniture.jpg" width="566" height="250" border="0" alt="" /></a>

				<h3>Welcome to mook</h3>

				<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit.</p>

				<p>Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
			</div>

	</div>
 </body>

</html>

readers digest version: I have a 750px container. My content div is 566, plus 2px for the border, plus 20px for the padding. Giving it a margin-left of 162px gives us a grand total of 750. IE seems to hate the padding - when i modify that it works fine - even changing the margin doesn't do anything. and there's an extra 2px between the menu and the contents just in case.

So I can't figure why it's bumping down in IE. and i'm using v6, and have the doctype declared, so it shouldn't be in quirks mode.

TIA,

Greg

I'm working on converting a website from tables to div's and running into one little issue. The site is a basic header on top, navigation on left, content on right and a footer on the bottom.

I would like the navigation div to grow in height to match the height of the content div so that the background fills the left side of the page. I have placed the nav and content divs in a container div and set a min-height on the container. I was hoping that that would let me place height: 100% on the navigation div but it isn't growing ever. Is there a way to get something like this done?

FYI, the site is currently at http://users.adelphia.net/~mmorasch/

I've been scouring the net and the two books I have (Eric Meyer on CSS and CSS By Example), but I can't seem to wrap my head around the proper way to do a complex layout with <div>s.

Here is what I want in English:
1. A masthead/titlebar - always takes up the full browser width, with an image fixed on the left, say 100 px high, at the top of the page.
2. Left and right sidepanes, say 100 px wide, starting under the masthead, that are as long as
3. The middle section for content. This is the main area, and it may be arbitrarily long. This area determines the height of the entire page such that the sidepanes extend all the way to the bottom.

I would love to have (1) and (2) occur before (3) in the flow, so that I can make a simple header file for the masthead/sidepanes, then include the content, then close everything off with a footer file.

Here is my horribly borked attempt at using nested <div>s: Code:

<html><head><title>CSS Hell</title>
<style TYPE="text/css">
<!--
body {
  margin: 9px;
  margin-bot: 0px;
  background: #FFF;
}

#level0 {
  background: white;
}

#masthead {
  background: blue;
  height: 60px;
}

#level1 {
  background: #DDD;
  border: solid;
}

#menu {
  background: #BBB;
  width: 150px;
}

#level2 {
  background: white;
  float: right;
  border: dashed;
}

#promo {
  background: blue;
  float: right;
}

#main {
  background: #CCC;
}
-->
</style>
</head>

<body>
<div id=level0>
  level 0
  <div id=masthead>
    branding
  </div>
  <div id=level1>
    <div id=menu>
      LEFT SIDEPANE<br>
      menu<br>
      menu<br>
      menu<br>
      menu<br>
      menu<br>
      menu<br>
      menu<br>
    </div>
    level 1
    <div id=level2>
      level 2
      <div id=main>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
      </div>
      <div id=promo>
        RIGHT SIDEPANE<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Level 2 is nested inside level 1, but Firefox .9 renders the level2 div underneath level1. Also, the bottom border for level1 doesn't show up. ?!!?!?

Hi everyone-

I'm new here and am a newbie with CSS layouts. I'm having trouble with certain elements on the page that I was wondering if someone might be able to take a look at my code and html file. I'll trade graphics services for a few minutes of your time if neccesary.

Hopefully someone can let me email them I'll give mine as well I'm sure it's easy to find on my profile.

Thanks in advance for any help.

Hey,

I know how to do this using a table, but I'm worried it will break down in certain browsers and I want to know the best way to go about this and incoperate some css and divs..

Here is what the table would consist of

background: url ('../images/topbg.jpg') repeat-x;
height: 295px;
width: 850px;

1st row = 1 column
height: 155px;

2nd row = 8 equal columns
height: 140px;

In each of these 8 columns I want to insert an image link which are centered vertically as well as horizontally

Hey,

So I'm trying to create a blogger skin by myself and I'm already stuck.

I want the template to look something like this:

***

And I failed while I was looking for that kind of a template. And I did search, for a decent amount of time.

So, any help? Does somebody know, where can I get a template like that or how can I create it myself?

Thanks a bunch,
Lara.

EDIT: Um, new user accounts are not permitted to create posts containing URLs? Aw'sm. So, how can I show you my idea of the layout? :/

I was working on making 2 different link menu's one that dropped down and one that was stationary underneath it. On my computer it looks fine but on some computers the bottom link is partially underneath the top one. and the opacity filter's do not show up especially on mac's.

Was wondering if anyone could help.

Heres the website link, and then the code.
http://www24.brinkster.com/mattphat/test2.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HEAD>
<TITLE>Northwest Connecticut YMCA | We build strong kids, strong families, strong communities.</TITLE>
</HEAD>
<style type="text/css">  
* {
	margin: 0;
	padding: 0;
}



.menu {
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
width:780px;
height:35px;
background:#F0ECEB url(../meeting.jpg) 0 20px no-repeat;
position:relative; 
margin:0 0 8px 0;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relative;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
display:block; 
text-decoration:none; 
color:#000; 
width:116px; 
height:1.5em;
font-weight:bold;
color:#888; 
border-bottom:8px solid #888;
border-top:1px solid #888;
border-left:1px solid #888;
border-right:1px solid #888;
background:#F0ECEB; 
padding-left:10px; 
line-height:1.5em;
margin-right:2px;
}
/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:116px;
w\idth:116px;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px; 
border-collapse:collapse;
font-size:1em;
}

/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */

/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color:#000; 
border-bottom:8px solid #EE3233;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block; 
position:absolute; 
top:1.2em;
margin-top:11px;
left:0; 
width:116px;
border:1px solid #888;
border-top:0;
background:transparent;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block; 
background:transparent url(../../opacity/opaque.png); 
color:#000; 
border:0;
margin:0;
color:#333;
font-weight:normal; 
font-size:0.9em;
height:auto; 
line-height:1em; 
padding:5px; 
width:116px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#888; 
color:#fff;
}

/* special styling for IE5.5 and IE6 - transparency is non validating */
.menu ul li a:hover ul {
background:transparent filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;

margin-top:10px; /* for IE5.5 faulty box model */
marg\in-top:11px; /* for IE6 */
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd;
width:116px; /* for IE5.5 faulty box model */
width:116px; /* for IE6 */
}




#nav {
		float: left;
		width: 780px;
                height: 20px;
		margin-top: 0;
		padding: 0;
		list-style: none;
		background: #ccc;
		border-bottom: 1px solid #999;
		}
	
#nav li { 
		float: left;
		margin: 0;
		padding: 0;
		}
	
#nav a {
		float: left;
		display: block;
		padding: 0px 10px 0px 5px;
		text-decoration: none;
		font-weight: bold;
		font-size: 85%;
		color: #666;
		background: #ccc url(http://www24.brinkster.com/mattphat/YMCA/nav_slant.gif) no-repeat top right;
		}
#nav  b {
                float: left;
		display: block;
		padding: 0px 10px 0px 5px;
		text-decoation: none;
		font-weight: bold;
		font-size: 95%;
		color: #EE3233;
		background: #ccc url(http://www24.brinkster.com/mattphat/YMCA/nav_slant.gif) no-repeat top right;
                }
#nav #nav-1 a {
		padding-left: 10px;
                padding-right: 5px;
		}
	
#nav a:hover {
		color: #000;
		}	

</style>



<BODY> 
<div id="wrap 2">
<div id="wrap">




<div class="menu">

<ul>
<li><a class="drop" href="http://www24.brinkster.com/mattphat/ymca3.html">Home
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table><tr><td>

	<ul>
	<li><a href="http://www24.brinkster.com/mattphat/hoursofoperation.html" title="Hours of Operation">Hours of Operation</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/membershiprates.html" title="Membership Rates">Membership Rates</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/yassurance.html" title="Y-Assurance">Y-Assurnace</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/employment.html" title="Employment">Employment</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/contactus.html" title="Contact Us">Contact us</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>


<li><a href="http://www24.brinkster.com/mattphat/ymcatorrington.html">Torrington
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->


<table><tr><td>

	<ul>
	<li><a href="http://www24.brinkster.com/mattphat/tfacility.html" title="TFacility">Facility Schedule</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/tchildcare.html" title="TChildcare">Childcare</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/tlasers.html" title="Lasers">Lasers</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/tcamp.html" title="TORYMCA">TORYMCA</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/tyhouse.html" title="Y-House">Y-House</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>

<li><a href="http://www24.brinkster.com/mattphat/ymcawinsted.html">Winsted
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->


<table><tr><td>

	<ul>
	<li><a href="http://www24.brinkster.com/mattphat/wfacility.html" title="Facility Schedule">Facility Schedule</a></li>	
        <li><a href="http://www24.brinkster.com/mattphat/wchildcare.html" title="Childcare">Childcare</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/wcamp.html" title="Camp Rising StarCamp Rising Star</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/WYSB.html" title="WYSB">WYSB - Winchester Youth Service Bureau</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/wliteracy.html" title="Literacy">Literacy</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/wvolleyball.html" title="Y Volleball Juniors">Y Volleball Juniors</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>

<li><a href="http://www24.brinkster.com/mattphat/ymcacannan.html">Cannan
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->


<table><tr><td>

	<ul>
	<li><a href="http://www24.brinkster.com/mattphat/cfacility.html" title="Facility Schedule">Facility Schedule</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/cchildcare.html" title="Childcare">Childcare</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>

<li><a href="http://www24.brinkster.com/mattphat/ymcagiving.html">Giving
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->


<table><tr><td>

	<ul>
	<li><a href="http://www24.brinkster.com/mattphat/strongkids.html" title="2009 Strong Kids Campaign">2009 Strong Kids Campaign</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/givingvol.html" title="Volunteering">Volunteering</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->
</li>



<li><a href="http://www24.brinkster.com/mattphat/ymcacannan.html">About Us
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->


<table><tr><td>

	<ul>
	<li><a href="../menu/zero_dollars.html" title="?">?</a></li>
	<li><a href="../menu/embed.html" title="?">?</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>
</div>



<ul id="nav">
	<li id="nav-1"><b>Fall 2009 Programs&nbsp;&nbsp;&nbsp;&nbsp;</b></li>
	<li id="nav-2"><a href="http://www24.brinkster.com/mattphat/youthaquatics.html">Youth Aquatics&nbsp;&nbsp;</a></li>
	<li id="nav-3"><a href="http://www24.brinkster.com/mattphat/aquatics.html">Aquatics&nbsp;&nbsp;</a></li>
	<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/wellness.html">Wellness&nbsp;&nbsp;</a></li>
	<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/seniors.html">Seniors&nbsp;&nbsp;</a></li>
	<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/youthsports.html">Youth Sports&nbsp;&nbsp;</a></li>
	<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/preschoolPE.html">Preschool PE&nbsp;&nbsp;</a></li>
	<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/Specialty.html">Specialty&nbsp;&nbsp;</a></li>
</ul>

</ul>






</div>
</div>
</BODY>
</HTML>