CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

SaraHL Nybegynder

29. januar 2011 - 14:28 Der er 7 kommentarer og
1 løsning

Hjemmeside: Farveblokke i <body> uden brug af billed

Hej alle i kloge mennesker.
jeg har et spørgsmål med hensyn til min hjemmeside.
Jeg er ved at programmere den klassiske hjemmeside med vandrette blokke hele vejen ned.
Jeg er trænet op i at bygge min side ud fra en div id = #wrap. Men da jeg vil have blokkene farvet hele vejen, igennem min <body>, så den bliver tilpasset til hvilken som helst skærm, uden at møde en hvid flade, smelter min hjerne sammen. Jeg har prøvet en masse forskelligt, men intet virker.

Håber virkelig i kan hjælpe mig.

Jeg arbejde i Dreamweaver, og er under uddannelse som mediegrafiker, så ikke bruge alt for vildt computer sprog, Tak :)

Synes godt om

erle Nybegynder

29. januar 2011 - 16:55 #1

Er det blot baggrunds farven du vil have skiftet?

body {
background-color:blue;
}

Synes godt om

SaraHL Nybegynder

29. januar 2011 - 17:27 #2

Nej desværre. Hvis det dog bare var så simpelt.
Det er mine vandrette blokke/striber. Der skal gå hele vejen ud.
(Min menu linje + indhold består af to vandrette linjer. Som jeg gerne vil have fortsætter. uden for min #wrap)

Så jeg har feks. en blok på 265 px høj, som er lyseblå. Den vil jeg gerne have fortsætter. Men under den vandrette linje, har jeg en anden der er 400 px høj, som skal være mørkeblå, og som også gerne skulle fortsætte uden for min #wrap.

Håber du forstår. :)

Synes godt om

majbom Novice

29. januar 2011 - 20:01 #3

kan du ikke smide noget kode?

vi kan jo på ingen måde vide hvad der definerer din #wrap

Synes godt om

SaraHL Nybegynder

29. januar 2011 - 23:25 #4

Jo selvfølgelig, havde jeg ikke lige tænkt på. Her er mine html koder:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sara Huus Lund · Mediegrafiker elev</title>
<link href="styles/stylescreen.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="wrap">

<div id="top"> <h1>huuslund.dk</h1> <br /> <h2>Sara Huus Lund <br /> Mediegrafiker elev <br /> 2. hf</h2>

</div>

<div id="menu">

<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Galleri</a></li>
<li><a href="#">Sara</a></li>
</ul>
</div>

<div id="fyldtop">

</div>

<div id="indhold">

<h2> STAND UP <br /> STAND OUT <br /> AND <br /> STAND STRING </h2>

</div>

<div id="bund">

</div>

<div id="bundinfo">

<h5>Sara Huus Lund · 6000 Kolding · sara@huuslund.dk</h5>

</div>

</div>
</body>
</html>

Og her er min Css koder

#wrap {
height: 768px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#top {
float: left;
height: 120px;
width: 824px;
background-color: #33cccc;
padding-right: 100px;
padding-left: 100px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 40px;
position: relative;
z-index: 10;
}
#top h1 {
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #336666;
font-size: 24px;
margin: 0px;
padding: 0px;
line-height: normal;
}
#top h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #336666;
margin: 0px;
padding: 0px;
text-transform: uppercase;
line-height: normal;
}
#menu {
float: left;
height: 30px;
width: 924px;
background-color: #336666;
padding-left: 100px;
padding-top: 10px;
position: relative;
z-index: 10;
}
#menu ul {
text-decoration: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#menu li {
display: block;
float: left;
padding: 0px;
margin-top: 0px;
margin-right: 150px;
margin-bottom: 0px;
margin-left: 0px;
}
#menu a {
font-family: Arial, Helvetica, sans-serif;
color: #33cccc;
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
#menu a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
#fyldtop {
float: left;
height: 20px;
width: 1024px;
background-color: #33cccc;
position: relative;
z-index: 10;
}
#indhold {
float: left;
height: 250px;
width: 824px;
background-color: #336666;
padding-right: 100px;
padding-left: 100px;
padding-top: 40px;
padding-bottom: 40px;
position: relative;
z-index: 10;
}
#indhold h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bolder;
color: #33cccc;
text-transform: uppercase;
margin: 0px;
padding: 0px;
}
#bund {
float: left;
height: 160px;
width: 824px;
background-color: #33cccc;
margin: 0px;
padding-top: 0px;
padding-right: 100px;
padding-bottom: 0px;
padding-left: 100px;
position: relative;
z-index: 10;
}
#bundinfo {
float: left;
height: 40px;
width: 1024px;
background-color: #33cccc;
position: relative;
z-index: 10;
}
#bundinfo h5 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #336666;
}

Håber det kan bruges. :)

Synes godt om

webweaver Praktikant

30. januar 2011 - 01:27 #5

Hej Sara.

Jeg er lidt i tvivl, når du siger at du vil have dem til at fortsætte videre (dine blokke). Jeg har prøvet at lave det, som jeg tror at du ønsker.

Se her,
http://www.webweaver.dk/sara.htm

Det er bare 1 blok jeg har udvidet i eksemplet. Men koden er skrevet om, så de andre nemt kan udvides også, hvis der er flere som skal fylde mere.

Er det hvad du skal bruge?

Du kan finde CSS'en under www.webweaver.dk/sara_style.css

Synes godt om

SaraHL Nybegynder

31. januar 2011 - 11:44 #6

Hej Lasse.
Det var ligepræcis det jeg ønskede. :) Helt perfekt.
Mange tak. Så skal jeg bare overfører det til resten af mine blokke.

Er det rigtig forstået at det jeg skal gøre er at sætte min width til 100% og rette z-index.

Jeg sidder ikke med dreamweaver lige nu, så kan ikke prøve det af med det samme.

Men det er helt perfekt, det du har lavet. Fantastisk at du har ville bruge tid på det, for at hjælpe mig.

Det er i hvertfald ikke sidste gang jeg bruger eksperten.dk. :)

#menu {
margin: 0px;
height: 40px;
width: 100%;
background-color: #336666;
padding-top: 0px;
position: relative;
z-index: 10;
}

Synes godt om

webweaver Praktikant

31. januar 2011 - 17:04 #7

Hej Sara.

Nemlig. Jeg har lavet det sådan, at du bare angiver din width til 100% på de blokke, som skal være brede. Din z-index behøver du umiddelbart ikke, da den bruges til lag, som ligger oven på hinanden. Ikke noget du har, lige af hvad jeg kunne se.

Det er godt at du kunne bruge hjælpen og vil komme her en anden gang. Det er derfor at vi er her :)

Fortsat god dag :)

Synes godt om

webweaver Praktikant

03. februar 2011 - 22:03 #8

Du skal huske at lukke tråden, ved at acceptere svaret :-)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS