...

View Full Version : Beginner - CSS Problem



Quantum
12-22-2005, 12:28 AM
Firstly I'd like to say "Hi!", because this is my first post.

Now I've only yesterday learnt HTML & CSS (properly), and I was spurred on by a number of fantastic webdesigns I saw. With studying HTML and CSS I learnt that you shouldn't use tables to position - but CSS. So I set off.

Until...I hit a problem. The CSS "width" command, in IE width actually talks about the real width, while in FF width means the available width. I wanted to make all my links in the navigation bar the same width but because of this browser problem I couldn't.

I tried to use the "display:block;", which made my "widths" the same however it placed each different navigation button on a new line, and I wanted them all on the same line under the site's title. Any ideas? ;)

rmedek
12-22-2005, 01:20 AM
I tried to use the "display:block;", which made my "widths" the same however it placed each different navigation button on a new line, and I wanted them all on the same line under the site's title. Any ideas? ;)
Hey there, welcome to the forums. :)

So, width works like this: In a block-level element, the width takes up the available space (the width of the containing block). In an inline element, the width is just the width of the content, no matter what you tell it.

Since block-level elements also start on a new line, one way to get around this is using floats, or you could try using the inline display but adjusting padding to get some width (won't keep everything the same width, though, unless the link is the same text). Copy and paste the below code somewhere and you'll get a few examples.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>width example</title>
<style type="text/css">
ul#block li {
list-style: none;
float: left;
margin-right: 5px;
text-align: center;
width: 125px;
border: solid 1px #000;
}

ul#inline li {
list-style: none;
margin-right: 5px;
display: inline;
text-align: center;
padding: 0 2em;
border: solid 1px #000;
}

</style>
</head>
<body>
<h1>menu examples</h1>
<h2>floats</h2>
<ul id="block">
<li>link one</li>
<li>link two</li>
<li>link three</li>
<li>link four</li>
<li>link five</li>
</ul>

<div style="clear: both;">
<!-- clear this mess -->
</div>

<h2>display:inline</h2>
<ul id="inline">
<li>link one</li>
<li>link two</li>
<li>link three</li>
<li>link four</li>
<li>link five</li>
</ul>
</body>
</html>


Hope this helps...

Quantum
12-23-2005, 12:50 PM
Thank for that, you don't know how much that helps me.

In the last two days that I've been learning CSS and HTML, I've come to the conclusion that they are actually quite easy but the hard bit is making the pages work in ALL the browsers, and so I've got another problem.

I've crerating a two column template, and I want the two columns to both be contained by a border - producing what I called a "container". The coding I have implemented works in IE but not FF, and Opera - so it's obviously something I've missed out.

The HTML qualifies as XHTML Strict with no errors, and the CSS also qualifies. I'll post the coding in the next two post.

Quantum
12-23-2005, 02:26 PM
Sorry for the wait, HTML:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Simply Dots</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="_your description goes here_" />
<meta name="keywords" content="_your,keywords,goes,here_" />
</head>
<body>
<div class="container">
<div id="main">
<h2><span class="title">Welcome to Simply Dots</span></h2>
<p><span class="tagline">22nd December 2005</span></p>
<h3><span class="mainptit">Lipsum</span></h3>
<p>Blah</p>

<p>Blah</p>

<p>Blah</p>

<h3><span class="mainptit">And some more</span></h3>
<p>Blah</p>


<p>Blah</p>
</div>

<div id="sidebar">
<div id="importbox">
<h3><span class="sideptit">Important! - Please Read</span></h3>
<p>Blah</p>
</div>

<div id="newsbox">
<h3><span class="sideptit">News.</span></h3>
<p>Blah</p>
</div>
</div>
</div>
</body>
</html>

Quantum
12-23-2005, 02:29 PM
And the CSS:



body {
font-family:Arial, Helvetica;
font-size:0.75em;
background: white url(back.jpg) repeat;
margin:50px;
}

.container {
width:800px;
border-style:solid;
border-color:#222;
margin:0 auto;
background:#fff;
}

.title {
font-size:28px;
color:#008080;
width:560px;
text-align:center;
text-decoration: underline overline;
}

.tagline {
color:#005800;
font-weight:bold;
}

/*mainbox and content*/

#main {
width:520px;
padding:10px;
float:left;
}

.mainptit {
font-size:18px;
color:#008080;
}

/*sidebar and content in the side bar*/

#sidebar {
width:240px;
float:left;
margin:100px 0 0 0;
}

#importbox {
border-style:dashed;
border-width:2px;
border-color:#222;
background:#f63b4b;
padding:0 10px 0 10px;
Overflow:auto;
}

#sideptit {
font-size:14px;
}

#newsbox {
margin:50px 0 0 0;
border-style:dashed;
border-width:2px;
border-color:#222;
background:#ffcc33;
padding:0 10px 0 10px;
Overflow:auto;
}

Quantum
12-23-2005, 02:32 PM
I'm pretty sure it's a CSS problem when I'm decribing the .container class.

Thanks for any help.

harbingerOTV
12-23-2005, 03:33 PM
Since all your content inside the container is floated you will need an element that is not floated to pull the container down.



<div id="newsbox">
<h3><span class="sideptit">News.</span></h3>
<p>Blah</p>
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>


Use a block element so you don't have to tell the browser to display: block it. since it is already a block element it will make itsself fit the availible space.

Make it clear:both so that it sits below all the floated elements written above it in the HTML.

Quantum
12-23-2005, 03:49 PM
Thanks,

That makes so much sense, I think as I gradually learn more and more I'll get better at solving these problems on my own.

Yours,

Quantum :)

rmedek
12-24-2005, 12:40 AM
BTW, please take some time to read the Posting Guidelines (http://www.codingforums.com/postguide.htm).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum