Running into a few problems - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
July 18, 2008 at 8:19 pm #22945

swenson_designs
Member

I attached the mock up, HTML and CSS and the screen shot of the problems I’m having.

I have this odd space after the header? (I check the PSD file after I cropped it to make sure I didn’t crop anything extra) but nothing was there. Looked through the code (both HTML and CSS) and couldn’t seem to find the problem either? Any suggestions?

Secondly, this is obviously a two column design. I made the left and right column but I can’t seem to make the RIGHT column get in its proper spot?

Lastly, I need the top left "Swenson Designs" logo to be a link that always goes back to the index page. I cropped it as one large header…but should I have cut it into two separate (one for logo and one for navigation)? If so, how would I do that?

Anything else you can see on this page that’s missing would be appreciated. I’m using this for a WordPress design.

** CSS and HTML BELOW **

/*
For: Swenson Designs
By: Nick Swenson
*/

* {

padding: 0;
}

body {
font-size: 62.5%;
font-family: ‘Lucida Grande’, Verdana, Arial Sans-Serif;
background: url(images/body-bg.png) repeat-x;
}

p, li {
font-size: 1.0em;
line-height: 1.3em;
margin-bottom: 0.8em;
}

h1 { font-size: 3.3em; margin-bottom: 0.5em; font-family: ‘Helvetica’, MS Trebuchet, Sans-Serif;;}

.clear { clear: both; }

div#page-wrap {
width: 960px;
margin: 0 auto;

}

div#box {
width: 280px;
background: #CCCCCC;
}

ul#nav {
height: 146px;
background: url(images/header-bg.png) no-repeat;
list-style: none;
padding-left: 375px;
}

ul#nav li a {
display: block;
width: 110px;
float: left;
margin-top: 102px;
color: white;
font-weight: bold;
text-decoration: none;
font-variant: normal;
}
ul#nav li a:hover, ul#nav li a:active {
text-decoration: underline;
}

div#main-content {
padding: 0px 75px 30px 90px;
background: url(images/maincontent-bg.png) repeat-y;
}
div#main-content div#left-col {
float: left;
width: 500px;
}
div#right-col {
float: right;
width: 300px;
}

div#footer {
font-family: ‘Arial’, Sans-Serif;
height: 151px;
background: url(images/footer-bg.png) no-repeat;
padding: 73px 0 10px 0;
text-align: center;
color: #696869;
text-transform: uppercase;
font-size: 0.9em;
}

** 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=utf-8"/>
<title>Swenson Designs</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="page-wrap">

<ul id="nav">
<li><a href="#">CONTACT</a></li>
<li><a href="#">IDENTITY</a></li>
<li><a href="#">DIGICINEMA</a></li>
<li><a href="#">INTERACTIVE</a></li>
<li><a href="#">COLLATERAL</a></li>
</ul>

<div id="main-content">

<div id="left-col">

<h1>Facelift: Swenson Designs </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>

</div> <!– END left-col –>

<div id="right-col">

<img src="images/designer.jpg" alt="The Designer" />
<div id="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>

</div>

</div>
<div class="clear"></div>

</div> <!– END main-content –>

<div id="footer">
<p>© 2008 COPYRIGHT SWENSON DESIGNS, ALL RIGHTS RESERVED<br>
WORDPRESS POWERED | ENTRIES (RSS) | COMMENTS (RSS) <br> XHTML VALID | LOGIN </p>

</div>

</div> <!– END page-wrap –>

</body>
</html>

July 19, 2008 at 4:56 am #48587

nas627
Member

I’m designing my first page ever and I ran into that problem. But here’s the fix that I discovered. Every browser has it’s own css defaults for the h1,2,3,4,5,6 tags which is cause the gap because the h1 tag has a preset top margin to it. Try something like this to you h1 tag:

h1 {
font-size: 3.3em;
margin: 0em 0em 0.5em 0em;
font-family: ‘Helvetica’, MS Trebuchet, Sans-Serif;
postion: relative;
top: 20px;
Left: 20px;
}

Play with top and left "px" to get the position were you want it. for the text in the grey box you need to add some padding
"padding: 5px 3px;" I don’t know why your columns are miss aligning though

July 19, 2008 at 1:34 pm #48591

gheidorn
Member

Your universal declaration only has "padding: 0px;". Try adding "margin: 0px;" and then work from there. Setting this should make all elements start with no padding or margin, making them behave according to what you assign them, without any preset space.
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘CSS’ is closed to new topics and replies.