PDA

View Full Version : hello, could someone please help me :(



hellhound121
05-13-2006, 01:07 AM
hey all, ok looking at some of these post my problem seems so stupid :(, anyways. im new to CSS, i uset to use tables for image layouts. but many have said CSS is better, and it is as i have been learning some, but im very stuck on some stuff, E.G, like how to position text, how to position images and put text on them. without using tables. if you could post some sites that have some easy to follow-well explained-examples, then it would be very greatful ^^

one more thing, if you could code this layout i made in CSS not using tables, and leave comments on why, and what the code does. it would be very geatful too :)

http://img.photobucket.com/albums/v155/xlsasuke/img1.gif

Thankyou for all your help x anna x

dynamic_coder111
05-13-2006, 02:24 AM
Here is a good one:
http://www.w3schools.com/css/default.asp

hellhound121
05-13-2006, 03:30 AM
i have been there, but its not teaching me what i want to know

jscheuer1
05-13-2006, 08:21 AM
I'm really learning more and more of this all the time myself. I came up with this that closely mimics your image. There could easily be better ways to do it:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
margin:0;
padding:0;
}

.header a{
color:#fff;
background-color:#374461;
text-decoration:none;
}

.header {
position:relative;
height:2.5em;
font-family:verdana, arial, sans-serif;
font-size:.9em;
padding:0 5px;
color:#fff;
background-color:#374461;
border-bottom:1px solid #576178;
}
.header div {
position:absolute;
top:50%;
margin-top:-.55em;
}

.leftc, .rightc {
font-family:verdana, arial, sans-serif;
font-size:.9em;
height:36em;
border-top:1px solid #000;
}

.leftc div, .rightc div {
padding:0 5px;
}

.leftc {
float:left;
width:20%;
color:#fff;
background-color:#555454;
}
.rightc {
float:right;
width:80%;
color:silver;
background-color:#fff;
}

.footer {
clear:both;
height:1.5em;
position:relative;
font-family:verdana, arial, sans-serif;
font-size:.9em;
padding:0 5px;
color:#fff;
background-color:#374461;
}

.footer div {
position:absolute;
bottom:0;
}
</style></head>
<body>
<div class="header">
<div>Website Name &nbsp;- <a href="#">Home</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> &nbsp;- <a href="#">Home</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - </div>
</div>
<div class="leftc">
<div>navigation</div>
</div>
<div class="rightc">
<div>content</div>
</div>
<div class="footer">
<div>Footer</div>
</div>
</body>
</html>

hellhound121
05-13-2006, 02:24 PM
thanks so much jscheuer1 :D, this is exactly what i need, could you explain why there is like three .headers? and leftc, and rightc? that would be great.

Twey
05-13-2006, 02:29 PM
could you explain why there is like three .headers?There's only one header. Of three blocks whose selectors start with header, two apply to different elements within header.
leftc, and rightc?Left column, and right column. :)

hellhound121
05-13-2006, 04:45 PM
XD ^^ okay well can you explain, elements in elements, or what you said hehe. everything helps me. i now know. padding and margins are used for more than juat adding width to text.

Twey
05-13-2006, 04:55 PM
Well:

.header {
background-color: black;
}

...

<div class="header"><a>Something</a></div>Then that DIV will have a black background. However, if we use:
.header {
background-color: black;
}

.header a {
background-color: red;
}... then the <div> element will have a black background, but the <a> element will have a red background. Yes? :)

hellhound121
05-13-2006, 06:00 PM
yeah i think i get it, can you explain more :D im getting the hang of it. so will be nice to know more about it. thanks :D

jscheuer1
05-13-2006, 06:52 PM
You probably know this but, for the OP's information:

Twey, in your example, you have specified background colors with no foreground color. Not supposed to do that, if the user has a foreground color set in their configuration that matches your background - instant invisible text. If you set one color, set them both.

Using various selectors to control what is going on inside an element is fairly common. For example:

.header div

selects divisions that are one level or more inside the header class element. You can even use a selector like:

.header div div

to reach only those at least two levels deep.

Other multiple selectors are used to set properties common to two elements:

.leftc, .rightc

selects both of those classes for common definitions.

I played around with this a bit more and discovered a slight rendering glitch in Opera for which I made the below change (red), a bit of a compromise - a black left border might be better, or you can leave it out but, then there will be a 1px white dot in the top border for the columns in Opera. It has to do with the way Opera does top borders. There is probably a better solution like scrapping the top border for the columns and inserting a one pixel high division above them but, that is not ideal either. I also noticed that I left out a space for the '.header a' selector (inserted below, see green highlight) that is bad practice due to an IE bug that doesn't come into play in this particular case. Finally remembering that em units for font size can cause problems when they are nested in IE and the user resizes the view, I've changed those to %. Here is the updated style:


body {
margin:0;
padding:0;
}

.header a {
color:#fff;
background-color:#374461;
text-decoration:none;
}

.header {
position:relative;
height:2.5em;
font-family:verdana, arial, sans-serif;
font-size:90%;
padding:0 5px;
color:#fff;
background-color:#374461;
border-bottom:1px solid #576178;
}
.header div {
position:absolute;
top:50%;
margin-top:-.55em;
}

.leftc, .rightc {
font-family:verdana, arial, sans-serif;
font-size:90%;
height:36em;
border-top:1px solid #000;
}

.leftc div, .rightc div {
padding:0 5px;
}

.leftc {
float:left;
width:20%;
color:#fff;
background-color:#555454;
}
.rightc {
float:right;
width:80%;
color:silver;
background-color:#fff;
border-left:1px solid #555454;
margin-left:-1px;
}

.footer {
clear:both;
height:1.5em;
position:relative;
font-family:verdana, arial, sans-serif;
font-size:90%;
padding:0 5px;
color:#fff;
background-color:#374461;
}

.footer div {
position:absolute;
bottom:0;
}

jscheuer1
05-13-2006, 09:27 PM
I decided to use a wrapper divsion for the two floating columns to overcome the Opera problem mentioned previously. I've also commented the less obvious styles and the DOCTYPE to indicate their primary reasons:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<!-- Strict DOCTYPE used to force modern browsers into the closest thing they have to 'Standards Mode' -->
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { /*Remove body margins and padding so layout fills the window*/
margin:0;
padding:0;
}

.header a { /*Set color and style for header links*/
color:#fff;
background-color:#374461;
text-decoration:none;
}

.header {
position:relative; /*relative position to contain an absolute position element*/
height:2.5em; /*height set in relative units will resize with browser settings*/
font-family:verdana, arial, sans-serif;
font-size:90%; /*font size relative to resize with browser settings, % used to avoid IE bug*/
padding:0 5px;
color:#fff;
background-color:#374461;
border-bottom:1px solid #576178;
}
.header div { /*Positions header inner division vertically centered within header*/
position:absolute;
top:50%;
margin-top:-.55em;
}

.cols { /*Kludge to set both columns top border evenly in all browsers tested*/
border-top:1px solid #000;
}

.leftc, .rightc {
font-family:verdana, arial, sans-serif;
font-size:90%;
height:36em; /*fixed relative units height expands background in floated element while allowing it to resize with the browser settings*/
}

.leftc div, .rightc div {
padding:0 5px;
}

.leftc {
float:left;
width:20%;
color:#fff;
background-color:#555454;
}
.rightc {
float:right;
width:80%;
color:silver;
background-color:#fff;
}

.footer {
clear:both; /*required in some browsers to clear floats*/
height:1.5em;
position:relative; /*again, to contain absolute*/
font-family:verdana, arial, sans-serif;
font-size:90%;
padding:0 5px;
color:#fff;
background-color:#374461;
}

.footer div { /*Positions footer inner division to absolute bottom of footer element*/
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div class="header">
<div>Website Name &nbsp;- <a href="#">Home</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> &nbsp;- <a href="#">Home</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - </div>
</div>
<div class="cols">
<div class="leftc">
<div>navigation</div>
</div>
<div class="rightc">
<div>content</div>
</div>
</div>
<div class="footer">
<div>Footer</div>
</div>
</body>
</html>

hellhound121
05-13-2006, 10:02 PM
hey all, kk im back, i been working on some basic CSS, and it looks how i want it, but.. it looks messy. and i dont want this for all text "p", so i have to use classes right? .p1, .p2, etc. if not tell me pls, ok anyways here is the code. could anyone tell me how to neaten it up?

ok i tryed to add a content area but its not working, i dunno why, here is a pic of what happens. and the CSS is below the img.

http://img.photobucket.com/albums/v155/xlsasuke/uhm121.jpg


p{
border-style: solid;

border-left-width: 10px;

border-top-width: 0px;

border-right-width: 10px;

border-bottom-width: 0px;

border-color: #e3e3e3;

width: 300px;

font-family: tahoma; font-size: 10px; color: #565656; text-align: left;

padding-left: 5px;

padding-right: 5px;

margin-left: 40px;

margin-right: 40px;
}

.content{
border-style: solid;

border-left-width: 5px;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-color: #e3e3e3;

width: 300px;

font-family: tahoma; font-size: 10px; color: #565656; text-align: left;

padding-left: 5px;

padding-right: 5px;

margin-left: 380px;

margin-top: 0px;

margin-right: 0px;
}

Twey
05-13-2006, 11:13 PM
Twey, in your example, you have specified background colors with no foreground color. Not supposed to do that... unless the foreground colour has been specified in a parent.
Also, "example" is the operative word. :)
and i dont want this for all text "p", so i have to use classes right?Right.
p, .content {
border: solid #e3e3e3;
border-width: 0 10px;

width: 300px;

font-family: tahoma, sans-serif; /* specify a generic font face */
font-size: 100%; /* never use pixels for font sizes! */
color: #565656;
text-align: left;

padding-left: 5px;
padding-right: 5px;
}

p {
margin-left: 40px;
margin-right: 40px;
}

.content{
border-width: 0 0 0 5px;

margin-left: 380px;
margin-top: 0;
margin-right: 0;
} I'm no CSS expert, however, so there may be problems or other enhancements with/for this.

jscheuer1
05-14-2006, 02:25 AM
Originally Posted by John
Twey, in your example, you have specified background colors with no foreground color. Not supposed to do that
... unless the foreground colour has been specified in a parent.

Dangerous, some browsers may still take control even if the parent's colors are defined, not likely but, there are other reasons. The state of affairs in the parent may change or the style may be applied (especially if it is a class selector) elsewhere with a different parent, leading to just the situation we wish to avoid. It is not so difficult to always apply both colors and it is a good practice, similar to always leaving a space here (underlined red):

selector_{

To avoid that one in 100 IE bug.

hellhound121
05-14-2006, 02:24 PM
ok well i used the code
p{
border-style: solid;

border-left-width: 10px;

border-top-width: 0px;

border-right-width: 10px;

border-bottom-width: 0px;

border-color: #e3e3e3;

width: 300px;

font-family: tahoma; font-size: 10px; color: #565656; text-align: left;

padding-left: 5px;

padding-top: 0px;

padding-right: 5px;

padding-bottom: 6px;

margin-left: 40px;

margin-right: 40px;
}

.content{
border-style: solid;

border-left-width: 5px;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-color: #e3e3e3;

width: 300px;

font-family: tahoma; font-size: 10px; color: #565656; text-align: left;

padding-left: 5px;

padding-right: 5px;

margin-left: 400px;

margin-top: 0px;

margin-right: 0px;
}

and it still didnt work, its the same as before? whats the problem pls

hellhound121
05-14-2006, 04:45 PM
kk i used my brain and i added some positioning, but i dunno it feels like the code isnt right, that its not the propper way of doing it? anyways ill let you smart ppl deside :P

code:

p, .content {
border: solid #e3e3e3;
border-width: 0 10px;

width: 300px;

font-family: tahoma; /* specify a generic font face */
font-size: 60%; /* never use pixels for font sizes! */
color: #565656; /* this is the font color */
text-align: left; /* this will align your text */

padding-left: 5px; /* padding left and right of the content and p box */
padding-right: 5px;
}

p {
position:relative; top:-10px;
margin-left: 40px; /* margin left and right of the page */
margin-right: 40px;
}

.content{
position:relative; top:-199px;
border-width: 0 0 0 5px; /* 1 is top- 2 is right- 3 is bottom- 5 is left */

margin-left: 375px;
margin-top: 0;
margin-right: 0;
}

and it ligns up where i want it too. i use the margins to deside where they go from left to right, and i use the positioning:relative to position them from top to bottom.