Får ikke 3 bilder til å henge sammen som de skal CSS

[NicholasWalker]

Hei, holder på og kode en nettside jeg har laget i photoshop...

 

Har komt ganske langt på kodinga men har ett problem

jeg har 3 bilder som skal være ett som er slicet i photoshop.

åsså er det ett hull midt i.

 

Først kommer jeg til å vise CSSen min så htmlen.

Under det kommer ett par bilder om hva problemet er:

 

 

CSS:

#main_content {
float:left;
padding-top:30px;
padding-left:10px;
padding-bottom:0px;
padding-right:0px;
height:333px;
width:573px;
}

#news_top {
float:left;
width:573px;
height:275px;
background:url(images/News.jpg) no-repeat;
}
#news_left {
padding-top:0px;
float:left;
width:412px;
height:68px;
background:url(images/index_22.jpg) no-repeat;
}

#news_right {
padding-top:0px;
float:right;
width:161px;
height:68px;
background:url(images/News_ReadMore.jpg) no-repeat;
}

 

HTML:

<div id="main_content">
<div id="news_top"></div>
<div id="news_left"></div>
<div id="news_right"></div>
</div>

 

 

Dette er sånn det skal se ut:

 

Dette er sånn det ser ut:

 

Dette er bildene delt opp:

[srbz]

http://www.yourhtmlsource.com/stylesheets/cssspacing.html

 

Jeg vet ikke hva som er standardverdier når du ikke har definert boe, men prøv å definere både top, margin-top/bottom og padding-top/bottom for alle 3 divs. Forstå forskjellen på ulike typer spacings.

[NicholasWalker]

http://www.yourhtmlsource.com/stylesheets/cssspacing.html

 

Jeg vet ikke hva som er standardverdier når du ikke har definert boe, men prøv å definere både top, margin-top/bottom og padding-top/bottom for alle 3 divs. Forstå forskjellen på ulike typer spacings.

 

har prøvd, top-margin står bare der for di jeg akuratt prøvde igjen... det gjør ingen forskjell

[johannessimonsen]

Problemet ditt er egentlig meget enkelt, det er ikke i css filen din feilen ligger, det er en feil du har gjort selv under slicing.

 

Fordi når du har slica så har du ikke gjort andre ting usynlig, Det du skal gjøre er å gjøre alt usynlig, så slicer du bakrunden alene, og så gjør du den usynlig, å gjør read more knappen visible, og slicer den.. ALENE.

 

Deretter tar du sånn på den siste ruten ved navne også, alene.

Du må ikke slice hele stykke med alt visible, da får du feil som regel..

 

Så når du skal skrive det inn i css'en tar du di bildene som skal oppå og gir de en float så de havner på toppen av de andre bildene.

 

Det skal funke. :

 

Jeg holder på å code den for deg akkuratt nå, så kan du se på min når jeg er ferdig.

Endret 7. august 2010 av johannessimonsen

[Bjonski]

Problemet ditt er egentlig meget enkelt, det er ikke i css filen din feilen ligger, det er en feil du har gjort selv under slicing.

 

Fordi når du har slica så har du ikke gjort andre ting usynlig, Det du skal gjøre er å gjøre alt usynlig, så slicer du bakrunden alene, og så gjør du den usynlig, å gjør read more knappen visible, og slicer den.. ALENE.

 

Har ingenting å si. Trådstarters tankegang skal funke helt fint. Det er noe tull i CSS-filen en plass.

 

Gi meg noen minutter så skal jeg prøve å finne feilen.

 

Edit: En av feilene jeg oppdaget ved å kopiere CSS-filen din var at ingen av elementene passet sammen. De var rart plassert.

Dersom du vil at bildene skal henge sammen må også CSS-elementene henge sammen.

 

Debug: Den til venstre er slik ditt stilsett ser ut. Den til høyre er slik det bør se ut.

Feilplasseringen til news_right og news_left skyldes at jeg har brukt border og bredden endres med 1-2 piksler. Men main_content er for liten til resten av innholdet.

 

En annen ting: Det er mye lettere å lage nettsider dersom du bruker hele tall i bredde og høyde.

F.eks 600 piksler i bredde i stedet for 573.

Endret 7. august 2010 av Bjohansen

[NicholasWalker]

Problemet ditt er egentlig meget enkelt, det er ikke i css filen din feilen ligger, det er en feil du har gjort selv under slicing.

 

Fordi når du har slica så har du ikke gjort andre ting usynlig, Det du skal gjøre er å gjøre alt usynlig, så slicer du bakrunden alene, og så gjør du den usynlig, å gjør read more knappen visible, og slicer den.. ALENE.

 

Har ingenting å si. Trådstarters tankegang skal funke helt fint. Det er noe tull i CSS-filen en plass.

 

Gi meg noen minutter så skal jeg prøve å finne feilen.

 

Edit: En av feilene jeg oppdaget ved å kopiere CSS-filen din var at ingen av elementene passet sammen. De var rart plassert.

Dersom du vil at bildene skal henge sammen må også CSS-elementene henge sammen.

 

Debug: Den til venstre er slik ditt stilsett ser ut. Den til høyre er slik det bør se ut.

Feilplasseringen til news_right og news_left skyldes at jeg har brukt border og bredden endres med 1-2 piksler. Men main_content er for liten til resten av innholdet.

 

En annen ting: Det er mye lettere å lage nettsider dersom du bruker hele tall i bredde og høyde.

F.eks 600 piksler i bredde i stedet for 573.

 

 

Størrelsen på det siste bildet er ikke rett jeg bare satt det opp ca slik det er.

 

Jeg fikk designet av en som heter johannes simonsen men jeg har kodet det.

Cssen er rett på størrelse css filen men jeg laget de røde firkantene i paint ikke nøyaktig bare for og vise deg hvordan jeg har satt det opp. jeg måtte kutte det opp for og få read more knappen til og være en link.... og ikke hele bildet...

 

EDIT: grunnen til at det ikke ser ut som at det passer er for at jeg tok med litt av bakgrunnen når jeg slica. Størrelsene er tatt direkte fra dreamweaver så de er helt rette.

Endret 9. august 2010 av WeExClan