PDA

View Full Version : Background-image, disappearing url & alternative code problem



DemonicB
Apr 2nd, 2007, 11:02 AM
Alright, so here's the site I'm working on:
http://webontwerp.rega.khleuven.be/503119/Webdesign/website/index.html
here's the CSS:
http://webontwerp.rega.khleuven.be/503119/Webdesign/website/index.css

Now, I've got a couple of problems I need a hand with, starting off with:
1: SOLVED
2: SOLVED
3: If you validate the html, you'll see that I get 6 errors, and that's because I use h4's and p's in an a element... (See newsbar) But this gives me an effect that when you hover over any piece of that text or the header, the header will get underlined, and only that, not the text. And the entire news item can be clicked. Seeing as I would really like my page to be flawless, are there any alternatives to this that still allow me to have this effect?

This is still a work in progress, only the index page has been made "properly".


All help is welcome!

Thanks in advance!
DemonicB

rmedek
Apr 2nd, 2007, 04:39 PM
Welcome to CF. In the future, please read our Rules (http://codingforums.com/rules.htm) and Posting Guidelines (http://codingforums.com/postguide.htm) before posting. Specifically, use a more descriptive title when posting a new thread.

Thanks.

DemonicB
Apr 2nd, 2007, 04:42 PM
Alright, sorry about that, would you please be so kind to edit my title then, into:
"Background-image, disappearing url & alternative code problem"

Thanks

Excavator
Apr 2nd, 2007, 05:47 PM
Now, I've got a couple of problems I need a hand with, starting off with:
1: As you can see in the CSS, I have an image as a background (defined in body{}), and this shows up on the screen, but then I want to have another image overlapping it a bit(defined in #wrapper{}), this does not show up, and I have no clue why... (I do think either the logo banner or infobar is interfering with it, but I don't know for sure)
Thanks in advance!
DemonicB

Good morning DemonicB,
Your background is not showing up because your absolute positioning so many things. Try it without:

/* Algemeen */

body {
text-align: center;
background: #9c9675 url(i/buitenkant.png) top center repeat-y;
color: #663;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
font-size: 0.9em;
}

html {
min-width: 842px;
}
* {
margin: 0;
padding: 0;
border: none;
}
#home {
width: 842px;
margin: 0 auto;
text-align: left;
overflow: hidden;
}
#wrapper {
color: #663;
background-image: url(i/wrapke.png);
background-position: top left;
background-repeat: repeat-y;
width: 842px;
margin: 0 auto;
text-align: left;
overflow: hidden;
}

/* Logo */

#logo {
width: 200px;
height: 150px;
float: left;
text-indent: -9999px;
overflow: hidden;
margin-left: 13px;
}

#logo p{
}

#logo p a:link, #logo a:visited {
display: block;
width: 200px;
height: 150px;
background: #cc9 url(i/logo.png) top left no-repeat;
}

#logo p a:hover {
background: #cca url(i/logo.gif) top left no-repeat;
}


/* Header */

#header h1 {
text-indent: -9999px;
overflow: hidden;
}

#header h1 a:link, #header h1 a:visited {
display: block;
width: 600px;
height: 150px;
background: #cc9 url(i/banner.png) top left no-repeat;
}

#header h1 a:hover {
background: #cca url(i/banner.png) top left no-repeat;
}

/* Menu */

#navigatie {
width: 170px;
float: left;
padding: 20px 0 15px 0;0
margin-left: 13px;
font-family: 'Trebuchet MS', 'Lucida Grande',Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #E3E3BD;
color: #c3bd99;

}

#navigatie a#hier {
border-left: 10px solid #EE7B10;
border-right: 10px solid #EE7B10;
}

#navigatie ul {
list-style: none;
border: none;
}

#navigatie li {
border-bottom: 2px solid #E3E3BD;
}

#navigatie li a {
display: block;
padding: 5px;
border-left: 10px solid #8a8778;
border-right: 10px solid #9c9675;
background-color: #c3bd99;
color: #8a8778;
text-decoration: none;
width: 100%;
}

#navigatie li a:hover {
border-left: 10px solid #EE7B10;
border-right: 10px solid #EE7B10;
background-color: #ffffff;
color: #000;
}

/* Informatie-bar */

div#infobar {
margin-left: 213px;
width: 600px;
background-color: #CCCC99;
}

#infobar p {
text-align: center;
}

/* De eigenlijk inhoud van de pagina */

div#inhoud {
width: 380px;
float: left;
margin-left: 50px;
}

/* Nieuwsbalk en zijn inhoud */

div#nieuws {
margin-left: 636px;
padding: 0px 5px 5px 5px;
width: 170px;
border: none;
}

#nieuws h3 {
margin-bottom: 20px;
}

#nieuws a{
color: #663;
}

#nieuws a h4 {
margin-bottom: 5px;
text-decoration: none;
}

#nieuws a:hover h4{
text-decoration: underline;
}

#nieuws a:visited h4{
color: #667;
}

#nieuws p{
margin-bottom: 15px;
font-size: 0.8em;
text-decoration: none;
}
I added #home to your css but I don't see why it's in your markup at all. If it's not needed, get rid of it.
And read about absolute positioning here. (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)
Instead of absolute positioning I think it's much better to use floats and margins. Here is a good tutorial on that. (http://css.maxdesign.com.au/floatutorial/)

DemonicB
Apr 2nd, 2007, 06:24 PM
Thanks a lot excavator!

I'll try using less absolutes from now on :)

This takes care of number 1 and 2

Excavator
Apr 2nd, 2007, 07:07 PM
For #3 maybe you'd like a rollover effect?

Have a look at this: http://www.nopeople.com/CSS/CSS_rollover/

That is a 3 state rollover but it's very easy to make it into 2.
==
Another example of the same technique. (http://www.nopeople.com/doodlebug/) This one is a 2 state rollover.