...

View Full Version : CSS newbie needs help



switters
05-10-2008, 06:17 AM
Hello,

I'm trying to teach myself CSS in a hurry because I need to set up a website for my photography portfolio. I have a book called "CSS: The Missing Manual" which is helpful. However, I'm having trouble with positioning and layout. Specifically, I don't understand when to use floats and when to use relative & absolute positioning.

I've attached a PNG of the layout I'm going for. It's very simple: an 800x600 div with a border that will contain both the images (Flash) and text (project statements and "about me" content). Above that div, I'd like the name of my site (CDK Arts) on the left, and the navigation menu on the right.

One more thing: I'd like to set it up so that any text added inside of the div (using the <p> tag?) is justified and centered both horizontally and vertically in the box.

If someone could help me with the CSS for this layout I'd be very grateful. I imagine it's quite simple, but I cannot get my head around it.

Thanks in advance,
Chris

http://farm4.static.flickr.com/3212/2479196507_7f0f4ebd07_o.png

FWDrew
05-10-2008, 10:44 AM
Specifically, I don't understand when to use floats and when to use relative & absolute positioning.
Stay away from absolute positioning and floats unless you fully understand what they do and how they affect the rest of the content :thumbsup:


One more thing: I'd like to set it up so that any text added inside of the div (using the <p> tag?) is justified and centered both horizontally and vertically in the box.

If someone could help me with the CSS for this layout I'd be very grateful. I imagine it's quite simple, but I cannot get my head around it.

Ok...so do you have a link? Do you have any coding done yet? How do you want us to help you? Surely you dont expect someone to code the website via the picture for free?

You need to show us something that we can work with and help you with.

Regards,

Drew

nicky
05-10-2008, 01:25 PM
I'm glad you show enough interest to buy a book, however, text can only get you so far. A lot to do with coding and CSS comes from experience. I have 6 years and I'm still learning new techniques. Experiment by maybe finding a site that provides free layouts coded using DIVs and maybe take a look at it. Also, like FWDrew stated, surely you don't expect someone to code your layout free. I would search for a company that could do it for cheap. I know a few if you would like to know.

effpeetee
05-10-2008, 01:48 PM
The three url's in my signature containa wealth of info. Especially Sources.

Sources - Floats - IEBugs & Oddities,

Frank

switters
05-10-2008, 02:54 PM
Thanks to everyone for your replies. No, I don't expect anyone to code the site for free. I'm just hoping for some direction on how to do this cleanly and efficiently.

Actually, the graphic I sent was a screenshot of a local HTML file. I've been able to get it looking the way I want using CSS, but it's kind of "hotwired". I don't really know what I'm doing, but somehow I've been able to get it looking right. The problem is that I don't fully understand how I've done it, so any code I need to add in the future may be resting on shaky foundations.

Here's the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>
<link rel = "stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://cdkarts.com/js/swfobject.js""></script>

</head>

<body>

<div id="wrapper">
<ul id="banner">
<li><a href="index.html">CDK Arts</a></li>
</ul>
<ul id="imagenav">
<li><span class="projectname">Project: "Choice"</span></li>
<li><a href="choice.html">Statement </a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="about.html">About</a></li>
</ul>


<div id="flashcontent">
<embed style="width:800px; height:640px;" class="viewbook_presentation" type="application/x-shockwave-flash" src="http://embed.viewbook.com/28139/3a558c50d389c2" flashvars=""></embed></div>

</body>
</html>

And here's the relevant CSS:

body {
background:#ffffff;
margin-top:0px;
margin-left:0px;
margin-right:0px;
font-family: verdanda;
}

a:link, a:visited {
padding-bottom: 1px;
color: #31363e;
text-decoration: none;
}

a:hover {
padding-bottom: 0;
color: #dddddd;
}

#wrapper {
margin: 0 auto;
top: 60px;
width: 800px;
position: relative;
}

#banner {
font-size: .75em;
font-weight: bold;
font-family: Arial, Helvetica;
text-transform: uppercase;
list-style-type: none;
position: relative;
left: -39px;
top: 27px;
}

#imagenav {

top:-18px;
list-style: none;
font-size: .7em;
position: relative;
float:right;
font-family: Arial, Helvetica;
font-weight: 700;
}

#imagenav li {
display: inline;
color: #70757e;
letter-spacing: .06em;
padding-left: 8px;
text-transform: uppercase;

}

#imagenav li a {
border-left: 1px dotted #858c97;
padding: 0 6px 0 8px;
}

p {
position:relative;
width: 400px;
line-height: 130%;
font-family: Arial, Helvetica;
font-size: .72em;
color: #858c97;
}

#flashcontent {
clear: both;
position: relative;
border: solid thin #666666;
width: 800px;
height: 640px;
top:-19px
}

#flashcontent p {
text-align: justify;
padding-left: 200px;
padding-right: 200px;
top: 180px;
position: relative;
line-height: 140%;

}


So, to be more specific about my questions:

1) Am I using the correct method to position the banner (CDK Arts), navigation bar and flashcontent div as they currently appear?

2) How can I position a text box inside of the flashcontent div so that it is centered both horizontally and vertically?

Thanks again for your help!

switters
05-10-2008, 03:48 PM
I forgot to ask this question:

I'm building a text-based menu of projects inside of the flashcontent div. Ideally, I'd like to set it up so that when the viewer hovers/rolls-over a link, the picture displayed to the right changes.

I'm guessing this is something I would set up with Flash, but I wanted to see if there's a way I can do it with CSS first. I know even less about Flash than I do about CSS :(.

Here's a picture to give you an idea what I mean. (Right now, the graphic is positioned correctly but doesn't change upon rollover).

http://farm4.static.flickr.com/3213/2479932145_0ce94b5f81_o.png

rglazebrook
05-12-2008, 04:34 PM
Hi Switter,

Regarding your last question (about image rollovers), it's entirely doable with CSS. I won't go into details here (because the venerable Eric Meyers has already done all of the busywork), but you can find a demo and explanation of the technique here:

http://meyerweb.com/eric/css/edge/popups/demo2.html

Roll over the links on the left to see it in action, then read through his explanation to see how it's done.

-Rob

switters
05-12-2008, 07:48 PM
Thanks for the tips everyone!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum