Plasering av elementer i CSS

[Big_JT]

Driver å lager en ny hjemmeside, men plages med å lage bunnen på siden. Vil ha noen bilder på venstre side. (Powered by CC, Godkjent XHTML osv.) og noe copyright info på høyre side.

 

Problemet er at jeg ikke får dette til å stå på samme høyde, bildene til venstre blir plasert over teksten til høyre.

 

Koden jeg bruker nå er som følger:

#copyright {
clear: both;
border-top: 1px solid #545454;
background-color: #b6c5a3;
padding: 5px;
}

#copyright p {
 color: #3d492b;
 font: 9px/10px Verdana, Arial, Helvetica, sans-serif;
 margin: 0 0 3px 618px;
 }

#copyright img {
 	color: #3d492b;
 	margin: 0 0 3px 10px;
 }

<div id="copyright">
<img src="poweredbycc.png" alt="Powered by Clarkconnect" />
<p>Copyright 2006 Big JJ</p>
<p>All rights reserved</p>
</div>

 

Kunne løst dette enkelt med en liten tabbel, men nå er målet mitt å gjøre dette kun med CSS.

[PHPdude]

Du bør vel droppe denne bruken av margin. Prøv heller å legg til display:inline; på p og img elementene

[Big_JT]

Kan du utdype lit mere? Ganske ny på CSS enda.....

[PHPdude]

Folk har en tedens til først å lære seg alle de "unyttige" CSS elementene som color: background: font og lignende uten at man kan de virkelig nyttige CSS elementene, som float, clear og display(!!)

Liten oversikt over display her: http://www.w3schools.com/css/pr_class_display.asp

Anbefaler deg og google etter "css display" og lese det du kommer over.

 

De to meste brukte verdiene til display er

- inline: elementene blir plassert akkurat der de er i HTML-koden

- block: elementet blir vist med et linjeskift før og etter (akkurat som å putte <br> før og etter)

 

HTML-tagger har forskjellige standard verdier for display: <div> tagger er "block" mens <span> er "inline". Og vis jeg ikke tar feil er også <p> og <img> "block"-elementer som standard så da vises de med et linjeskift før og etter, men vis du endrer dem til "inline" så kommer de etter hverandre på samme linje.

 

f.eks:

#copyright {

clear: both;

border-top: 1px solid #545454;

background-color: #b6c5a3;

padding: 5px;

}

 

#copyright p {

color: #3d492b;

display:inline;

}

 

#copyright img {

color: #3d492b;

display:inline

}

Endret 27. august 2006 av PHPdude

[Big_JT]

Driver å lærer, så finner altids noen nye koder som er fine.

 

Nå driver jeg å tester css koden min med validatoren til W3C. Får opp en masse warnings jeg ikke er helt med på. Lånt mye av koden min fra andre sider, men alt virket OK. Så jeg lurer bare på hvor alvorlige feilene er.

 

Skjønner ikke helt hva som er galt i at jeg bare bruker background-color eller color. Må virkelig begge disse være med i samme del?

 

Driver å rydder i koden nå, sikkert mye unyttig og rart der.

 

Svaret fra W3C ligger vedlagt under sammen med koden min.

 

Skjult tekst: (Marker innholdet i feltet for å se teksten):

W3C Jigsaw Powered

W3C CSS Validator Results for file://localhost/style.css

 

To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.

Warnings

URI : file://localhost/style.css

 

* Line : 20 (Level : 1) You have no background-color with your color : h2

* Line : 32 (Level : 1) You have no color with your background-color : #container

* Line : 42 (Level : 1) You have no color with your background-color : #hMenu

* Line : 42 (Level : 2) Redefinition of background-position : #hMenu

* Line : 42 (Level : 2) Redefinition of background-color : #hMenu

* Line : 42 (Level : 2) Redefinition of background-image : #hMenu

* Line : 42 (Level : 2) Redefinition of background-repeat : #hMenu

* Line : 48 (Level : 2) Redefinition of margin-right : #hMenu ul

* Line : 48 (Level : 2) Redefinition of margin-bottom : #hMenu ul

* Line : 48 (Level : 2) Redefinition of margin-left : #hMenu ul

* Line : 48 (Level : 2) Redefinition of margin-top : #hMenu ul

* Line : 52 (Level : 2) Redefinition of background-repeat : #hMenu ul

* Line : 52 (Level : 2) Redefinition of background-image : #hMenu ul

* Line : 52 (Level : 2) Redefinition of background-position : #hMenu ul

* Line : 52 (Level : 2) Redefinition of background-color : #hMenu ul

* Line : 59 (Level : 2) Redefinition of background-image : #hMenu ul li

* Line : 59 (Level : 2) Redefinition of background-repeat : #hMenu ul li

* Line : 59 (Level : 2) Redefinition of background-position : #hMenu ul li

* Line : 71 (Level : 1) You have no background-color with your color : #hMenu ul li a

* Line : 105 (Level : 1) You have no background-color with your color : #news p

* Line : 112 (Level : 1) You have no background-color with your color : #news p .date

 

Valid CSS information

 

* body {

o text-align : center;

o padding : 10px 0;

o margin : 0;

}

* h1 {

o margin : 0;

o padding : 0;

o font-size : 1px;

o width : 841px;

o height : 134px;

o text-indent : -2000px;

o background : url(header-ny.jpg);

}

* h2 {

o padding : 0 0 0 20px;

o margin : 5px 0 0;

o color : #434343;

o background : url(bigBullet.gif) no-repeat 3px 5px;

o font : 18px/25px Georgia, "Times New Roman", Times, serif;

}

* p {

o margin : 0 0 15px;

}

* #container {

o text-align : left;

o border : 1px solid #545454;

o width : 841px;

o margin : 0 auto;

o background : #fff url(bgMain.gif) repeat-y;

o font : 13px/19px "Trebuchet MS", Georgia, "Times New Roman", serif;

}

* #hMenu {

o border-style : solid;

o border-color : #545454;

o border-width : 1px 0;

o height : 25px;

o background : #cbd1c3 url(menuBullet.gif) no-repeat 143px 10px !important;

o background : #cbd1c3 url(menuBullet.gif) no-repeat 143px 9px;

o padding : 0 0 0 5px;

}

* #hMenu ul {

o margin : 0 0 0 -40px !important;

o margin : 0;

o list-style : none;

o text-align : center;

o background : transparent url(menuBullet.gif) no-repeat 725px 10px !important;

o background : transparent url(menuBullet.gif) no-repeat 686px 9px;

}

* #hMenu ul li {

o display : inline;

o padding : 0 0 0 23px;

o background : url(menuBullet.gif) no-repeat 4px 6px !important;

o background : url(menuBullet.gif) no-repeat 4px 9px;

}

* #hMenu ul li#frst {

o padding : 0;

o background : none !important;

}

* #hMenu ul li a {

o font : bold 14px/25px Georgia, "Times New Roman", Times, serif;

o text-decoration : none;

o padding : 3px 8px;

o color : #000;

}

* #hMenu ul li a:hover {

o text-decoration : none;

o background-color : #e1e5db;

o color : #000;

}

* #copyright {

o clear : both;

o border-top : 1px solid #545454;

o background-color : #b6c5a3;

o padding : 5px;

o color : #3d492b;

}

* #copyright p {

o font : 9px/10px Verdana, Arial, Helvetica, sans-serif;

o margin : 0 0 3px 620px;

}

* #copyright img {

o display : inline;

o float : left;

}

* #news {

o width : 205px;

o float : left;

o padding : 5px;

}

* #news p {

o color : #222222;

o font : 11px/12px Verdana, Arial, Helvetica, sans-serif;

o margin : 0 5px 10px 12px;

}

* #news p .date {

o display : block;

o color : #4776bd;

o font : bold 11px/18px Georgia, "Times New Roman", Times, serif;

o background : url(bulletNews.gif) no-repeat 0 4px;

o margin : 0 0 0 -15px;

o padding : 0 0 0 15px;

}

* #main, #bilde {

o float : left;

o width : 615px;

o padding : 0;

o margin : 0 5px 0 0;

}

* #bilde img {

o border : 1px solid #828282;

o padding : 3px;

o float : right;

o margin : 8px;

}

 

Valid CSS!

www-validator-css

Last Updated : Sunday, August 27, 2006 12:34:50 PM GMT+00:00