A few CSS problems

Forum Moderators: not2easy

Message Too Old, No Replies

A few CSS problems

Kevve

1:07 pm on Jul 21, 2010 (gmt 0)

So, I have a few different problem at the moment. First being that the header of my website isn't showing at all.

Codes used:
HTML:

<div class="header">
 <div class="menu">
 <ul>
<center><li><a href="http://portfolio.warplay.net" class="selected">Home</a></li>
<li><a href="/#">Portfolio</a></li>
<li><a href="/#">Contact</a></li></center>

</ul>
</div>
</div>

CSS:

.header {
background:#fffff url(images/header.png) center no-repeat;
width:947;
height:235;



}
.menu {
display:inline;
font-weight:bold;
 float:left;
padding-top:0;
 width:947px;
font-size:12px;
text-transform:uppercase;
vertical-align:middle;
}
.menu li {
display:inline;
padding:0 115px;
}
.menu a:link, .menu a:visited {
color:#AFAFAF;
}
.menu a:hover, .menu li a.selected {
color:#fff;
}

The menu is obviously working as it should, but I want the menu on the header, and the header isn't even showing up.

Shado

1:24 pm on Jul 21, 2010 (gmt 0)

Just a thought but have you tried changing your header to a id the same with your menu.

CSS:
#header {}
#menu {}

HTML:
<div id="header">
<div id="menu">
...
</div>
</div>

Also try centering your menu in the css - add margin:auto; to your #menu

I have not tested your code but that's what I would do ;)

Kevve

1:31 pm on Jul 21, 2010 (gmt 0)

I just tried it, and it's not only that the header doesn't show up, the menu is just the regular <li> now. I.e a blue list with no padding.

Kevve

1:41 pm on Jul 21, 2010 (gmt 0)

Could it be that the image in question, is just too big?
It's 1263x180, and when I tried <a href>'ing it in to my website, it was scaled down to a horrible size.

Will it be scaled down if I use css also?

Shado

2:48 pm on Jul 21, 2010 (gmt 0)

Well for download speed I would say don't use such a big image - scale it down by using a image editor.

Whether the image is a link or not the size is set by your height and width.

If you are looking to use an image as a logo in your header try this.

#header {
width:780px;
height:300px;
margin: 0px auto;
}
#logo {
width:780px;
height:300px;
background-image:url(images/image.png);
background-repeat:no-repeat;
margin: 0px auto;
}

and use this as your html

<div id="header">
<div id="logo"></div>
</div>

that way if you need your header to be larger than the image you just need to change the header properties

Shado

2:50 pm on Jul 21, 2010 (gmt 0)

can you upload your images some where so I can download them?

Kevve

3:03 pm on Jul 21, 2010 (gmt 0)

I'm really only using 3 images, header and banner being one.
[data.fuskbugg.se...]

[data.fuskbugg.se...]

[data.fuskbugg.se...]

So basically, I made the header show up using

body {
background: #131313 url(images/header.png) no-repeat center top;
border:0;
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1;
min-width:947px;
margin:0;
padding:0;
}

but then again, when trying to add in the meny, it doesn't show up.

Yeah, it's really simple and it's basically the first thing I have ever done so.

Shado

3:09 pm on Jul 21, 2010 (gmt 0)

Ok - hang ten - I'm going to rework your code for you.

Shado

3:16 pm on Jul 21, 2010 (gmt 0)

Well for one - your images are .png and your code says .gif

Kevve

3:26 pm on Jul 21, 2010 (gmt 0)

My code doesn't say .gif o.O

background: #131313 url(images/header.png) no-repeat center top;

And the same with all images.

Now you are thinking about warplay.net I guess? In fact, I haven't even uploaded the site yet, I'm viewing the site in my browser.

Kevve

3:42 pm on Jul 21, 2010 (gmt 0)

I seem to have gotten the hang of it now. Thank you :D

I managed to fix it by modifying the slices a bit and using your code:

#header {
width:780px;
height:300px;
margin: 0px auto;
}
#logo {
width:780px;
height:300px;
background-image:url(images/image.png);
background-repeat:no-repeat;
margin: 0px auto;
}

Kevve

4:21 pm on Jul 21, 2010 (gmt 0)

Ah, another problem appeared. I noticed I had forgot a footer, so I decided to add one. It seems as it doesn't want to be in the right spot, and is just off by a few pixels.

I have tried padding and it didn't work.

Shado

4:22 pm on Jul 21, 2010 (gmt 0)

Sweet! I've also just finished - I did not include everything, and it might not be what you after but its enough for you to see what's going on.

HTML:


<body>
<div id="header">
<div id="menu">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
<div class="showcase"></div>
<div class="location">
<h1>154 JACKSON STREET EAST&nbsp;&nbsp;&nbsp;&nbsp;HAMILTON, ONTARIO&nbsp;&nbsp;&nbsp;&nbsp;(905) 921 - 9368</h1>
</div>
</div>
<div id="container">
<div class="content">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet.</p> 
</div>
<div class="sidebar">
<h3>Header 3</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div id="footer"></div>
</body>
</html>

CSS:


head {display:none;} 
body {background-color: #e1e1e1;}
img {border:none;}

#header {background-image:url(images/header.png);width: 780px;font-family: Georgia, "Times New Roman", Times, serif;font-size: 16px;color: #FFF;height: 190px;margin: auto;ackground-repeat: no-repeat;}

#menu {background-image:url(images/menu_top.png);width: 780px;height: 65px;}
#menu ul{margin: 10px 20px; padding: 0;float: left;}
#menu ul li{display: inline;}
#menu ul li a{float: left; text-decoration: none;color: white;padding: 10.5px 11px; }
#menu ul li a:visited{color: white;}
#menu ul li a:hover, .menu ul li .current{color: #fff;background-color:#0b75b2;}
.showcase {background-image:url(images/header.png);width: 780px;height: 145px;}
.location {background-image:url(images/menu_top.png); width:780px;height: 65px;}

#container {background-image:url(images/text.png);width: 740px;text-align: justify;height: 495px;margin: 0px auto;padding: 10px 20px;background-repeat: no-repeat;}
.content {width: 450px;text-align: justify;float: left;height: auto;margin: 10px;}
.sidebar {width: 230px;background-color: #e1e1e1;text-align: justify;float: right;height: auto;margin: 10px;padding: 5px;}

#footer {background-image:url(images/menu_top.png); width: 780px; height: 65px; margin: 0px auto 10px auto;}

Good luck

Shado

4:24 pm on Jul 21, 2010 (gmt 0)

The problem with your images are that they are to large - when I redid your code I edited out the transparent side bars and resized them to 780px in width. Try that

Shado

4:27 pm on Jul 21, 2010 (gmt 0)

Let me know if you want me to upload the file to the web for you to pull off

Kevve

4:28 pm on Jul 21, 2010 (gmt 0)

I am using the exact same code as you do for your footer.

#footer {background-image:url(images/menu_top.png); width: 780px; height: 65px; margin: 0px auto 10px auto;}

And this is what happens. (Might be a bit hard to see on the white background)
[data.fuskbugg.se...]

Now, I have tried both padding-left and -right, but both of them seems to want to go left, and not the way I need it to go to fit in.

Shado

4:40 pm on Jul 21, 2010 (gmt 0)

I'm not sure as I cant see the whole picture but is it possible that the image of the content (text.png)is overlapping.

Shado

4:42 pm on Jul 21, 2010 (gmt 0)

Have a look at [shadipity.co.za ]

The footer looks fine

Kevve

5:20 pm on Jul 21, 2010 (gmt 0)

Thanks for all your help, I managed to get it going pretty nice! :D

[portfolio.warplay.net...]