CSS rollover spørsmål

PoleCat · 28. september 2004

BTW.: Hvordan gjør jeg det hvis jeg vil midtstille siden vertikalt?

Da må du ha fast høyde. :no:

#element {
 height: 400px;
 position: absolute;
 top: 50%;
 margin: -200px 0 0 0;
}

LoS · 28. september 2004

Er ikke det bare å bruke margin: auto 0; da?

PoleCat · 28. september 2004

Er ikke det bare å bruke margin: auto 0; da?

Vertikalt == nedover/ i høyden, Horisontalt == bortover/bredden?

Tha_Zaynt · 28. september 2004

ahh....mente seff bredden. Men fikk det ikke til med margin:auto 0 ;..

Endret 28. september 2004 av Tha_Zaynt

PoleCat · 28. september 2004

Arve bruker ikke fast høyde på absentvoid...

Dersom det var -----------------------------> sånn ( ) du ville midstille den, funker det med margin:0 auto; og text-align: center på body ja.

http://www.unrealized.org/les_artikkel/css/sentrering_del1/

Tha_Zaynt · 28. september 2004

skjønte det nå ja, blandet sammen vertical og horisontal :blush:

Men uansett...ingen som klarer å finne ut av hvorfor paddingen ikke fungerer som den skal?

Endret 28. september 2004 av Tha_Zaynt

Tha_Zaynt · 28. september 2004

Hmm får det ikke til å funke helt...Hva er galt nå da?

CSS

* {
margin: 0;
padding: 0;
}

body {
background-color: #F3F3F3;
padding: 0;
text-align:center;

}
.top {
background-image: url("images/header.png");
background-repeat: no-repeat;
height: 134px;
width: 722px;
}
div#menu {
margin: 0 auto;
}
div#menu ul {
list-style: none;
height: 31px;
overflow: hidden;
}

div#menu ul li {
display: inline;
float: left;
}

div#menu li a {
display: block;
overflow: hidden;
padding: 31px 0 0 0;
height: 0 !important;
height /**/ : 31px;
background-repeat: no-repeat;
}

div#menu li a:hover {
background-position: 0 -31px;
}

.index {
background-image: url("images/index.png");
width: 128px;
}
.aboutme {
background-image: url("images/aboutme.png");
width: 118px;
}

.friends {
background-image: url("images/friends.png");
width: 114px;
}

.guestbook {
background-image: url("images/guestbook.png");
width: 119px;
}
.gallery {
background-image: url("images/gallery.png");
width: 122px;
}

.links {
background-image: url("images/links.png");
width: 121px;
}
div#bunn {
background-image: url("images/bunn.png");
background-repeat: no-repeat;
height: 54px;
width: 722px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #999999;
padding: 10px 0 0 0;
}
div#bunn a:hover{
color: #999999;
text-decoration: underline;
}
div#bunn a:link{
font-family: arial;
color: #999999;
text-decoration: underline;
}
div#bunn a:visited{
color: #999999;
text-decoration: underline;
}
div#bunn a:active{
color: #999999;
text-decoration: underline;
}
.container {
background-image: url("images/container.png");
background-repeat: repeat-y;
height: auto;
width: 722px;
   padding: 10px 20px 0 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666666;
text-align:left;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>zaynt.shyper.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<div class="top"></div>
<div id="menu">
 <ul>
   <li><a class="index" href="index.php">Home</a></li>
   <li><a class="aboutme" href="aboutme.php">About me</a></li>
   <li><a class="friends" href="friends.php">Friends</a></li>
   <li><a class="gallery" href="gallery.php">Gallery</a></li>
   <li><a class="guestbook" href="guestbook.php">Guestbook</a></li>
   <li><a class="links" href="links.php">Links</a></li>
 </ul>
</div>

<div class="container">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consectetuer
   euismod leo. Morbi commodo feugiat quam. Maecenas id purus id enim tristique
   pharetra. Nunc ultricies diam. Sed et libero at felis dignissim hendrerit.
   Praesent ultricies magna. Proin quis nisl non urna molestie consectetuer.
   Maecenas nonummy tempor est. Sed eleifend augue sed massa. Nullam ipsum. Lorem
   ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nonummy erat vitae
   lectus. Pellentesque a leo a sapien dapibus sagittis. Sed mauris justo, porttitor
   ac, porttitor a, euismod sit amet, nisl. Aenean laoreet accumsan libero. Nulla
   facilisi. Sed porta dolor vel nisl. Nam molestie porta lorem. Phasellus at
   mi. Integer blandit felis non lacus. Nam ultricies euismod sapien. Pellentesque 
   tempor. Aliquam id urna. Suspendisse nulla urna, gravida vitae, porttitor
   sed, iaculis vitae, pede. Pellentesque </p>
 lacus lacus, varius convallis, euismod id, pharetra sed, lorem. Sed urna
   sapien, porta sed, iaculis ut, tincidunt eget, justo. Fusce nunc. Ut wisi.
   Praesent rhoncus mollis libero. Mauris sit amet ligula at pede elementum aliquet.
   Etiam leo turpis, ultricies sed, feugiat vel, dignissim non, sapien. Fusce
   imperdiet. Pellentesque mollis. Lorem ipsum dolor sit amet, consectetuer adipiscing
   elit. Suspendisse turpis wisi, sollicitudin quis, porttitor sit amet, ultrices
   gravida, magna. Donec pretium nulla tincidunt orci. Nam pretium eros at quam.
   Fusce sapien ligula, rutrum lacinia, commodo at, hendrerit viverra, mauris.
   Curabitur ac diam et felis accumsan tempor. Etiam pulvinar facilisis felis.
   Suspendisse potenti. Quisque in risus ac nunc sagittis consectetuer. Donec
   malesuada nulla ac metus.
</div>
<div id="bunn">
 <div align="center">
Validates <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Transitional</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS2</a>
 </div>
</div>

</body>
</html>

Endret 28. september 2004 av Tha_Zaynt

PoleCat · 28. september 2004

Lag en wrapper som du legger ALT det andre inne i og midtstiller:

#wrap {
 margin: 0 auto;
 width: XXXpx; /* legg inn bredden her */
}

Tha_Zaynt · 28. september 2004

Der gikk det ja..einndeli. Men får ikke til paddingen til høre på container'n og det plager snart vettet av meg..

PoleCat · 28. september 2004

Prøv å sette ned bredden på containeren med 20px uten å røre paddingen.

Du vet at padding blir lagt til på bredden, ikke sant?

Tha_Zaynt · 28. september 2004

Se der gikk det ja..takk så mye for hjelpen!

Tha_Zaynt · 28. september 2004

Noen som har tanker om hvorfor siden ikke ser ut som den skal i opera?

PoleCat · 28. september 2004

Renskrev CSS-en litt for deg, blokkelementer vil automatisk fylle ut hele blokken de er inne i, altså trenger du ikke angi bredde om de skal være 100%.

#wrap {
margin: 0 auto;
width: 722px;
}
* {
margin: 0;
padding: 0;
}

body {
background-color: #F3F3F3;
padding: 20px;
text-align:center;

}
.top {
background-image: url("images/header.png");
background-repeat: no-repeat;
height: 134px;
}
div#menu {
margin: 0 auto;
}
div#menu ul {
list-style: none;
height: 31px;
overflow: hidden;
}

div#menu ul li {
display: inline;
float: left;
}

div#menu li a {
display: block;
overflow: hidden;
padding: 31px 0 0 0;
height: 0 !important;
height /**/ : 31px;
background-repeat: no-repeat;
}

div#menu li a:hover {
background-position: 0 -31px;
}

.index {
background-image: url("images/index.png");
width: 128px;
}
.aboutme {
background-image: url("images/aboutme.png");
width: 118px;
}

.friends {
background-image: url("images/friends.png");
width: 114px;
}

.guestbook {
background-image: url("images/guestbook.png");
width: 119px;
}
.gallery {
background-image: url("images/gallery.png");
width: 122px;
}

.links {
background-image: url("images/links.png");
width: 121px;
}
div#bunn {
background-image: url("images/bunn.png");
background-repeat: no-repeat;
height: 54px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #999999;
padding: 10px 0 0 0;
}
div#bunn a:hover{
color: #999999;
text-decoration: underline;
}
div#bunn a:link{
font-family: arial;
color: #999999;
text-decoration: underline;
}
div#bunn a:visited{
color: #999999;
text-decoration: underline;
}
div#bunn a:active{
color: #999999;
text-decoration: underline;
}
.container {
background-image: url("images/container.png");
background-repeat: repeat-y;
height: auto;
   padding: 15px 20px 0 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666666;
text-align:left;
}

Vet ikke om dette fikser noe i Opera.

Du burde også sette opp headeren din som h1-element. Slik f.eks:

h1 {
overflow: hidden;
padding: 134px 0 0 0;
height: 0 !important;
height /**/ : 134px;
background: url("images/header.png") no-repeat;
}

<h1>Zaynt.shyper.com</h1>

^^ erstatt .top med det over. :thumbup:

Tha_Zaynt · 28. september 2004

Tack så mycket, ble faktisk litt bedre i opera og..

Logg inn

CSS rollover spørsmål

Anbefalte innlegg

PoleCat

Lenke til kommentar

Videoannonse

LoS

Lenke til kommentar

PoleCat

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

PoleCat

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

PoleCat

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

PoleCat

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

PoleCat

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer