Forum Mjukvara Programmering och digitalt skapande Tråd

Ändra storlek på hemsida html/css dreaweaver

1
Skriv svar
Permalänk
Medlem
●

Ändra storlek på hemsida html/css dreaweaver

Jag håller på att göra en hemsida men tycker att den är för bred, just nu är den 1000px. Jag försöker då att byta storlek på alla divar, jag har en outer div, en wrapper, en rightside, massa content divs och så footer. Men det funkar inte. färgen som jag har på bodyn försvinner och blir vit och själva bodyn blir hur bred som helst och jag vet inte ens om divarna ändrar storlek allt ser bara konstigt ut.

Någon som vet hur man ska göra? Vore jätte tacksam för hjälp.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Lite svårt utan koden...

Fast bredd på sidor är ganska förlegat, istället bör du ha någon form av layout som dynamiskt ändras. Typ sätt bredden till procent på den yttersta "diven" i CSS istället för till ett visst antal px. Kräver dock att resten av layouten hänger med men det är inte så komplicerat.

Redigera
Citera flera Citera
Permalänk
Medlem
●

kod

Skrivet av snajk:

Lite svårt utan koden...

Fast bredd på sidor är ganska förlegat, istället bör du ha någon form av layout som dynamiskt ändras. Typ sätt bredden till procent på den yttersta "diven" i CSS istället för till ett visst antal px. Kräver dock att resten av layouten hänger med men det är inte så komplicerat.

Gå till inlägget

Okej här är csskoden.
Hur menar du att man ska sätta till procent på den yttersta diven? alltså så att till exempel content är 80% av den yttersta diven och rightside 20% osv? Så att allting ändras proportionerligt efter hur många pixlar den yttersta diven är? Det verkar smart i så fall, skriv gärna koden till det.

kod:

/* Global */

html { }
body { margin-top:0; margin-right:0; margin-bottom:0; margin-left:0;
padding:0;
background-color:#DADADA;
}

/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }

h1 { font-family:Arial, Helvetica, sans-serif; font-size:28px; color: #000; margin-top:0px; margin-bottom:0px; }
h2 { font-family:Arial, Helvetica, sans-serif; font-size:24px; margin-bottom:0; }
h3 { font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#F00; margin-bottom:0px; margin-top:5px; }
h4 { font-family:Arial, Helvetica, sans-serif; font-size:14px; margin:0px; margin-top:10px; }
h5 { font-size:14px; }
h6 { font-size:14px; }

/* Text Elements */

p { color:#000; font-family:Arial, Helvetica, sans-serif; font-size:14px; Line-height:150%; margin-bottom:15px; margin-top:0px; }
p. left { }
p. right { }

a { }
a:link { color: #ea2c2c; }
a:visited { color: #ea2c2c; }
a:active { color: #ea2c2c; }
a:focus { color: #ea2c2c; }
a:hover { color: #ea2c2c; }

/* Images */

.image-frame { padding:10px; border:1px #ccc solid; margin-right:5px; }

/* Containers */

#outer { width:1060px; background-color:#FFF; position: relative; margin: 50px auto; margin-top: 0px;
-moz-box-shadow: 0px 0px 10px #888; -webkit-box-shadow: 0px 0px 10px #888; box-shadow: 0px 0px 10px #888; }

#wrapper { width:1000px; margin:0 auto; background-color:#FFF; }

#logo { margin:0px ; float:left; }

#social-media-icons { float:right; }
#social-media-icons ul li { display:inline; }
#social-media-icons ul { margin-top:40px; }

#topnav { clear:both; background-color:#222222; border-radius: 5px; }
#topnav ul { margin:20px 0; padding:10px 0; }
#topnav ul li { display:inline; }
#topnav ul li a { padding:0 15px; }

#topnav a:link { color: #FFF; font-weight:bold; font-family:Arial, Helvetica, sans-serif; text-decoration:none; }
#topnav a:visited { color: #FFF; font-weight:bold; font-family:Arial, Helvetica, sans-serif; text-decoration:none; }
#topnav a:active { color: #FFF; font-weight:bold; font-family:Arial, Helvetica, sans-serif; text-decoration:none; }
#topnav a:focus { color: #FFF; font-weight:bold; font-family:Arial, Helvetica, sans-serif; text-decoration:none; }
#topnav a:hover { color: #f4e46b; font-weight:bold; font-family:Arial, Helvetica, sans-serif; text-decoration:none; }

#sliderwrapper { height: 410px; width:650px; margin-bottom:20px; }

#slider { width:650px; float:left; margin-bottom:0px; }

#rightside { width:285px; float:right; margin-left:20px; border-left:1px #ccc solid; padding-left: 20px; padding-bottom:50px; }

#content { width:650px; float:left; margin-top: 0px; padding-top: 0px; }

#content2 { width:650px; float:left; margin-top: 10px; padding-top: 10px; }

#content3 { width:650px; float:left; margin-top: 10px; padding-top: 10px; }

#content4 { width:650px; float:left; margin-top: 10px; padding-top: 10px; }

#content5 { width:650px; float:left; margin-top: 10px; padding-top: 10px; }

#content6 { width:650px; float:left; margin-top: 10px; padding-top: 10px; }

#content7 { width:650px; float:left; margin-top: 10px; padding-top: 10px; }

#content8 { width:650px; float:left; margin-top: 10px; padding-top: 10px; }

#content9 { width:650px; float:left; margin-top: 10px; padding-top: 10px; }

#content10 { width:650px; float:left; margin-top: 10px; padding-top: 10px; }

#footer { clear:both; margin-top:20px; border-top:1px; #000 solid; }

/* miscellaneous */

.date { display:inline; margin-right:5px; }
.headline { margin-top:0px; }
.footer-text { font-size:12px; font-style:normal; color:#000; text-align:center; border-top:1px #ccc solid; padding-top:15px; padding-bottom:15px; }
.article-image { float:left; margin-right:10px; }
.rightside-image { margin-bottom:20px; }
.highest-content { margin-top:0px; }

Dold text
Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag tror det löste sig nu, det blev fel när jag ändrade alla divarna på samma gång men när jag gjorde det en efter en och kollade i live view mellan varje ändring så funkade det. skumt..

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara