Gå til innhold

[Løst]Problemer med veldig enkel CSS

Modeswitch

Anbefalte innlegg

Modeswitch

Modeswitch

Skrevet
Skrevet (endret)

Er nybegynner og fant en veldig enkel layout som jeg skal bruke som utgangspunkt for min enkle hjemmeside. Problemet er at det jeg legger inn i området under navigasjonen ikke kommer kant i kant på venstresiden av den midtstilte hjemmesiden.

 

Slik ser siden ut nå: Link (jeg ønsker da at de sorte bildene skal ligge helt ute til venstrekanten)

 

Kan noen endre dette for meg? Antar at det er veldig lite som skal til for å løse problemet. Området heter "extra".

 

Skal naturligvis endre på veldig mye, for de av dere som reagerer på det fæle designet :D

 

Edit: jeg lurer også på hvorfor bildene får lilla ramme. Vil ikke ha det.

 

html,body{margin:0;padding:0}

body{font: 76% arial,sans-serif;text-align:center}

p{margin:0 10px 10px}

a{display:block;color: #981793;padding:10px}

div#header h1{height:80px;line-height:80px;margin:0;
 padding-left:10px;background: #EEE;color: #79B30B}

div#container{text-align:left}

div#content p{line-height:1.4}

div#navigation{background:#B9CAFF}

div#extra{background:#FF8539}

div#footer{background: #333;color: #FFF}

div#footer p{margin:0;padding:5px 10px}

div#container{width:700px;margin:0 auto}

div#content{float:right;width:500px}

div#navigation{float:left;width:200px}

div#extra{float:left; clear:left; width:200px}

div#footer{clear:both;width:100%}

Endret av Modeswitch
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Modeswitch

Modeswitch

Skrevet
  • Forfatter
Skrevet
Hvis jeg skal gjette er det paddingen under a som er problemet, men det er vanskelig å si uten å ha tilgang på html-koden.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/> 
<meta name="author" content=""/> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

<title>Tittel</title>

</head>

<body>

<div id="container">

<div id="header"><h1>Header</h1></div>

<div id="wrapper">

<div id="content">

<p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>

<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>

</div>

</div>

<div id="navigation">

<p>Meny</p>

</div>

<div id="extra">

<p>

<a href="http://xxx.com">
<img src="img/xxx.png">
</a>
<a href="http://www.xxx.com">
<img src="img/xxx.png">
</a>
<a href="http://www.xxx.no">
<img src="img/xxx.png">
</a>
</p>

</div>

<div id="footer"><p>Copyright 2009</p></div>

</div>

</body>

</html>

Lenke til kommentar
FrodeNilsen

FrodeNilsen

Skrevet
Skrevet (endret)
...

...
<div id="navigation">
<p>
   Meny
</p>
</div>
<div id="extra">
<p>
	<a href="http://xxx.com">
		<img src="img/xxx.png">
	</a>
	<a href="http://www.xxx.com">
		<img src="img/xxx.png">
	</a>
	<a href="http://www.xxx.no">
		<img src="img/xxx.png">
	</a>
</p>
</div>
...

 

...

Slik ser siden ut nå: Link (jeg ønsker da at de sorte bildene skal ligge helt ute til venstrekanten)

...

...
p{margin:0 10px 10px}

a{display:block;color: #981793;padding:10px}
...
div#navigation{background:#B9CAFF}

div#extra{background:#FF8539}
...
div#navigation{float:left;width:200px}

div#extra{float:left; clear:left; width:200px}
...

 

Nøsting

 

Du burde se på margin og padding. Du kan med fordel nullstille disse for alle elementer, problemet ved å gjøre dette er at du da må definere dette for alle elementer som trenger dette, men du vil oppnå full kontroll på denne måten:

 

Sett inn i begynnelsen i css fila:

* {margin:0;padding:0};

 

Du har ikke padding eller margin på navigation.

 

Du har ikke padding eller margin på extra.

 

Du har ikke padding på toppen av p, men du har padding til venstre, i bunn, og til høyre for for p elementer. Du har ikke margin på p.

 

Du har ikke margin på a elementer, men du har padding på 10px.

 

Som du ser så har du definert padding to steder, og du får da en "kant" på 20px rundt bildene dine.

 

løsning

 

Legg til dette i css-fila.

 

div#extra p,
div#extra p a
{
padding-left:0;
padding-right:0;
}

 

Frode

Endret av FrodeNilsen
Lenke til kommentar
Modeswitch

Modeswitch

Skrevet
  • Forfatter
Skrevet

Takk for innsatsen, men jeg skjønte lite av hva jeg skulle gjøre. Slik ser nå css-fila ut øverst:

 

* {margin:0;padding:0};

 

Jeg fjernet også alt som hadde med extra å gjøre og la heller inn dette:

 

div#extra p,
div#extra p a
{
padding-left:0;
padding-right:0;
}

 

Eneste forskjellen jeg kan se er at bakgrunnsfargen på extra naturlig nok forsvant.

Lenke til kommentar
FrodeNilsen

FrodeNilsen

Skrevet
Skrevet
...Eneste forskjellen jeg kan se er at bakgrunnsfargen på extra naturlig nok forsvant.

 

Bakgrundsfargen skulle også forsvinne. Du skulle lime inn nullstillingen øverst i css fila, og den siste greia kan du godt lime inn til slutt i fila.

 

Hvis du ikke får det til, så foreslår jeg at du laster opp filene: html, css, og bildet. Legg de som vedlegg til en svar post. Da blir det lettere å hjelpe deg.

 

Frode

Lenke til kommentar
Skoen

Skoen

Skrevet
Skrevet (endret)

Enten i IMG-taggen i HTML-kodingen, som følger:

<img src="img/xxx.png" style="border:0px;">

Eller så lager du et eget element i CSS-kodingen.

img { border:0px; }

 

Det er også anbefalt at du setter inn alt="" i img-taggen, som beskriver hva bildet skal være i tilfelle bildet ikke skulle fungere, slik at det kommer en plassholder med informasjon.

Endret av Skoen
Lenke til kommentar
Modeswitch

Modeswitch

Skrevet
  • Forfatter
Skrevet (endret)
Enten i IMG-taggen i HTML-kodingen, som følger:

<img src="img/xxx.png" style="border:0px;">

Eller så lager du et eget element i CSS-kodingen.

img { border:0px; }

 

Det er også anbefalt at du setter inn alt="" i img-taggen, som beskriver hva bildet skal være i tilfelle bildet ikke skulle fungere, slik at det kommer en plassholder med informasjon.

 

Takk, da er ett av to problemer løst :D hvordan kan jeg laste opp filene hit så det er mulig for dere å laste dem ned?

Endret av Modeswitch
Lenke til kommentar
FrodeNilsen

FrodeNilsen

Skrevet
Skrevet
...

Satser på at den blir lastet opp nå. Edit: prøvde å laste opp .rar først.

 

Den koden din var bare rot. Benytt html4.01 fremfor xhtml. Benytt utf-8, så blir æøå greit. Jeg har i praksis skrevet alt om igjen, og fremdeles er nok ikke koden tilstrekkelig enkel til at jeg tror du vil mestre den.

 

Du kan jo altis sende meg en PM hvis du lurer på noe.

 

se vedlegg.

 

Frode

index.html

Lenke til kommentar
Modeswitch

Modeswitch

Skrevet
  • Forfatter
Skrevet (endret)

Tusen takk for hjelpen. Setter stor pris på at du tok deg tid til dette. Koden ser litt rotete ut, men skal se om jeg forstår den.

 

Tror jeg skal legge inn i en style.css så det blir mer oversiktelig i index-fila :)

Endret av Modeswitch
Lenke til kommentar
FrodeNilsen

FrodeNilsen

Skrevet
Skrevet
..

Tror jeg skal legge inn i en style.css så det blir mer oversiktelig i index-fila :)

 

Hvis du har ting du i fremtiden vil spørre om her på forumet, så vil det å bake inn CSS-koden i html fila, og laste den opp som jeg har gjort, føre til at flere vil hjelpe deg. Det blir så sabla mye enklere å hjelpe deg da. Det er jo en smal sak å dele ting i to, slik som du har tenkt.

 

Svært hyggelig om du kan bruke rableriet mitt til noe fornuftig.

 

Frode

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...