Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hi all. I'm dude trying to get pro at writing css code and make web designs for the fun of it :) My project at the moment is to make a new design for my friend's "blog" (it's more like a site for him to show off the comics that he loves to make :P). If you wanna have a look at the site as it looks now go to www.zipmic.dk. As you can see the design is, eh, ugly.
The site I'm working on atm can be found here www.ebeltoftghetto.dk/zipmic and if you ask me the design is pretty neat if you keep in mind that it's made by a newbie :P But of course there's some problems with the site :( :
1. Try and check it out in Firefox, and then take another look at it in IE. As you might have guessed already it looks like shit :( I have tried a few things myself to make the site look nice but it doesn't seem to work out that well.I would really love if someone out there could help me making the site good in IE !
2. The other problem that I have is the "new" label to the right isn't moving along when you resized the windows, or if you run in lower res than I use at home (=bad).
I have seen sites with this kind of stuff so I know that here is some ppl out there who knows how to make it :D Please share the knowlegde lol ^^
ps. the CSS file url is www.ebeltoftghetto.dk/zipmic/style.css -
-
CommentAuthorMister Bubbles
- CommentTimeJul 14th 2006
Put this in the header of your index page.
<!--[if IE]>
#maincontent
{
width: 420px;
}
<![endif]--> -
-
add this rule to id = comiccontent
#comiccontent{
_margin:15px 7px;
} -
Thanks both ! :D you are the best :)
Just saw another problem. If you check out #header h2 I have a border-top, and IE doesnt like that for some reason :S? Should I use some kind of if IE again :)?
EDIT: I tried to remove border-top: 4px solid #659011; from #header a:hover and it seems to work out pretty well (though makes the #header h2 border-top longer to the right than it really is :S?), but it kinda removes that lillte hover effect that I like :(
Any Ideas ?
EDIT2: Just tried to give z-index:1; to #header h2 and z-index:2; for a:hover. Still no go :/ -
This should do it (overriding what you have currently):
#header h2
{
border: 0;
}
#header a:hover
{
border-top: 4px solid #659011;
}
#header a
{
border-top: 4px solid white;
}
#header a:link, #header a:visited, #header a:hover
{
padding-left: 17px;
padding-right: 17px;
}
#header a.last:link, #header a.last:visited, #header a.last:hover, #header a.last
{
margin-right: 0px;
padding-right: 21px;
} -
Ahh, I forgot to mention:
Get rid of the white space between the links in the header, and there won't be a gap in the border with the above CSS.
Hope this helps,
- Josh -
Thanks Josh, helped me alot :)
So, im almost there because of your great help :D I just need one more thing and thats the NEW! label. If someone could link me to a tut about placing stuff like that, then I would be very glad :) -
absolute position it in #comiccontent instead.
#comiccontent
{
position:relative;
}
#new
{
z-index: 2;
top: -20px; /* you'll have to play with these values a bit to make it fit -*
right: -40px;
} -
Thanks to you too :) Awesome forum with awesome users !
1 to 9 of 9