Trenger hjelp med design

22. desember 2013

Hei, jeg lager et hjemmeside design for morroskyld og vil ha sånn type design som dette: http://www.buildwindows.com

Men har et lite problem, jeg får ikke blådd ned på siden og når jeg skal se nedover så ser jeg ikke alt så må zoome ut for å se det.
Er fult klar over at backgrunsbile ikke vises fordi jeg skal ikke ha det nå :P

Her er det da det ikke er zooma ut:
http://postimg.org/image/l9sn2ov0n/

Her er det zooma ut:
http://postimg.org/image/lhbzo3oal/

Og her er koden:

HTML-kode

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d 
        }
        
        body {
                background-image:url(../../Documents/CinemaProjects/Bakgrunn%20hjemmeside.jpg)no-repeat; position:absolute; top:0;left:0;width:100%; height:100%;display:block;z-index:-1;
                font-family: 'moon_flower_boldregular';
        }
        
        #partial-overlay {
        width: 100%;
        height: 980px;
                background: rgba(255, 255, 255, .1); /* TODO frost */
        position: fixed;
         top: 0;
         left: 0;
  }
        @font-face { font-family: JuneBug; src: url('../Moon Flower Bold.ttf'); } 
h1 {
font-family: JuneBug
}
h2 {
font-family: JuneBug
}
h3 {
font-family: JuneBug
}
h4 {
font-family: JuneBug
}
.content-box-red {
    margin: 0 0 25px;
    overflow: hidden;
    padding: 20px;
}
 
.content-box-red {
    background-color: #d8ecf7;
    border: 1px solid #afcde3;
}

</style>
<div id="partial-overlay">
</div>
<div id="partial-overlay">
</div>
<div id="partial-overlay">
</div>
<div id="partial-overlay">
</div>
<div id="partial-overlay">
</div>
<div id="partial-overlay">
</div>
<div id="partial-overlay">
</div>
<div id="partial-overlay">
</div>
<div id="partial-overlay">
</div>
<div id="partial-overlay">

<div id="body" style="clear:both;text-align:center;color:#333;font-size:70px">

<h1>F*ckMondays Appareal</h1>
<link rel="stylesheet" href="mbcsmbrfzq.css" type="text/css" />


<!-- Menus created with the trial version of Easy Button & Menu Maker can be used for evaluation purposes only.
     Using this code (whether modified or not) on an actual website without having paid for the software is a
     serious violation of copyright laws. -->
<ul id="mbrfzqebul_table" class="mbrfzqebul_menulist css_menu" style="width: 1307px; height: 100px;">
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient100" style="width: 268px;"><a href="/Home">HOME</a></div></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient100" style="width: 250px;"><a href="/Shop">SHOP</a></div></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient100"><a href="/who_are_we">WHO ARE WE?</a></div></li>
  <li class="topitem"><div class="buttonbg gradient_button gradient100" style="width: 360px;"><a href="/contact">CONTACT US</a></div></li>
</ul>

<script type="text/javascript" src="mbjsmbrfzq.js"></script>
<h3>A new type of clothing</h3>
</div>

<div class="content.box.red">Masse random tecxt her.Masse random tecxt her.Masse random tecxt her.Masse random tecxt her.Masse random tecxt her.Masse random tecxt her.Masse random tecxt her.Masse random tecxt her.Masse random tecxt her.Masse random tecxt her.</div>
</head>

<body>

Alt som er på siden er bare et eksempel så dere vet det!

Sist endret av Alexxxy; 22. desember 2013 kl. 19:04.

Mothership

69 8

22. desember 2013

Hvor er mbcsmbrfzq.css?

Alexxxy

Trådstarter

22 0

22. desember 2013

Det er til den menyen, den ligger i mappa med html siden i

Kode

#mbrfzqebul_table {
  margin: 0px;
  padding: 0px;
  line-height: 0px;
  font-size: 0px;
  display: inline-block;
}

#mbrfzqebul_table li a {
  line-height: 100px;
  font-size: 96px;
  font-family: "moon Flower",sans-serif;
  text-decoration: none;
  color: #FFFFFF;
  font-style: normal;
  font-weight: normal;
  padding: 0 20px 20px 20px;
  display: block;
  cursor: pointer;
  white-space: nowrap;
}

#mbrfzqebul_table li div.buttonbg {
  height: 100px;
  width: 405px;
  line-height: 0;
  background-color: #0071BB;
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: 0 0 0 0 transparent;
  text-align: center;
}

#mbrfzqebul_table li:hover div.buttonbg a, #mbrfzqebul_table li.expanded a.topitem, #mbrfzqebul_table li.active a.topitem,
#mbrfzqebul_table li.itemhot a.topitem, #mbrfzqebul_table li a:hover {
  color: #FFFFFF;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}


#mbrfzqebul_table li.expanded div.buttonbg, #mbrfzqebul_table li.active div.buttonbg, #mbrfzqebul_table li.itemhot div.buttonbg, #mbrfzqebul_table li:hover div.buttonbg {
  background-color: #74D214;
  box-shadow: 0 0 0 0 transparent;
  border-color: transparent;
}

#mbrfzqebul_table {
  padding: 5px;
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  border-collapse: separate;
}

#mbrfzqebul_table ul li a {
  color: #FFFFFF;
  font-family: "Segoe UI",sans-serif;
  font-size: 13px;
  line-height: 17px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  display: block;
  vertical-align: middle;
  white-space: nowrap;
}

#mbrfzqebul_table ul li:hover > a {
  color: #FFFFFF;
  font-family: "Segoe UI",sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

#mbrfzqebul_table ul li.subexpanded a.subexpanded, #mbrfzqebul_table ul li.subitemhot a.subitemhot, #mbrfzqebul_table ul li a:hover {
  color: #FFFFFF;
  font-family: "Segoe UI",sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

#mbrfzqebul_table ul li:hover, #mbrfzqebul_table ul li.subexpanded, #mbrfzqebul_table ul li.subitemhot {
  border-color: #CCCC99;
  background-color: transparent;
  box-shadow: none;
}

#mbrfzqebul_table ul {
  margin: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  padding: 8px;
  background: #67BF12;
  font-size: 0;
  border-radius: 0;
}

#mbrfzqebul_table ul li a {
  padding: 8px 16px 8px 14px;
  text-align: left;
}

#mbrfzqebul_table ul li.separator {
  padding: 8px;
  cursor: default;
  background: none;
  box-shadow: none;
  border-width: 0;
}

#mbrfzqebul_table ul li.separator div {
  border-top: 1px solid #FFFFFF;
  font-size: 0px;
}

#mbrfzqebul_table ul li {
  border-style: solid;
  border-color: #68CC69;
  border-width: 0;
  height: auto;
  width: auto;
  text-align: left;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  float: none;
  margin: 0 0 8px 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
}

#mbrfzqebul_table ul li.last_item {
  margin-bottom: 0;
}


#mbrfzqebul_table .spaced_li {
  margin: 0px 8px 0px 0px;
}

#mbrfzqebul_table a img {
  border: none;
}

#mbrfzqebul_table li {
  list-style: none;
  float: left;
}

#mbrfzqebul_table.css_menu li {
  position: relative;
}

#mbrfzqebul_table.css_menu ul li:hover > ul {
  opacity: 1;
}

#mbrfzqebul_table.css_menu li:hover > ul {
  top: 100%;
  left: 0;
  right: auto;
  opacity: 0.80;
}

#mbrfzqebul_table.css_menu ul li:hover > ul {
  top: -0px;
  left: 100%;
  right: auto;
}

#mbrfzqebul_table ul {
  position: absolute;
  top:-99999px;
  z-index: 4000;
}

#mbrfzqebul_table ul ul {
  position: absolute;
  z-index: 5000;
}

#mbrfzqebul_table .submenu_arrow {
  margin-left: 8px;
}

#mbrfzqebul_table div.gradient100 { 
  background-image: url('button_bg.png'); 
  background-repeat: repeat-x; 
  background-color: #E8E9B4; 
} 

#mbrfzqebul_table li:hover div.gradient100, #mbrfzqebul_table li.expanded div.gradient100, #mbrfzqebul_table li.active div.gradient100, #mbrfzqebul_table li.itemhot div.gradient100 { 
  background-image: none; 
  background-color: #74D214; 
} 

#mbrfzqebul_table div.gradient_button { 
  background: -moz-linear-gradient(top, #E8E9B4 0%); 
  background: -webkit-linear-gradient(top, #E8E9B4 0%); 
  background: -ms-linear-gradient(top, #E8E9B4 0%); 
  background: linear-gradient(top, #E8E9B4 0%); 
}

Affe

Musikkprodusent

367 61

22. desember 2013

Kanskje det går hvis du putter min-heigh:1000px; elns i body? Driver å lærer css/html selv, så vet ikke om det funker :P
Eller så kan det være fordi du har alt i <head>, idk.

Alexxxy

Trådstarter

22 0

23. desember 2013

Skal teste det nå, så ikke at det sto head øverst :P

ferskvann

i polhavet.

315 145

23. desember 2013

Affe er inne på noe. Alle div-bokser skal ligge i <body>. Du kan skrive CSS i <head>, men det er bedre å bruke separate CSS filer og linke til de fra <head>, slik du allerede har gjort med mbcsmbrfzq.css.

Alexxxy

Trådstarter

22 0

23. desember 2013

Okei, takk for hjelpen skal legge alt i en annen fil. var ikke jeg som gjorde det med mbcsmbrfzq.css det er et program som lager menyer :P

Hvordan gjør jeg sånn at den får informasjonen fra .css fila mi?
Har lagd en css fil men skjønner ikke hvordan den får alle stilene til html fila

fuzzy76

webdings

2.482 589

25. desember 2013

Regel 1 når man sliter med layoutproblemer i CSS/HTML: Validere. Ofte vil det alene løse problemet.

ferskvann

i polhavet.

315 145

25. desember 2013

Sitat av Alexxxy

Vis hele sitatet...

Hvis css-filen din heter stil.css og ligger i samme mappe som html-filen, skriver du dette mellom <head> og </head>.

Kode

<link rel="stylesheet" href="stil.css" type="text/css" />

Nå har html-filen tilgang til stilfilen stil.css. Jeg anbefaler deg å lese diverse tutorials om css og html. W3schools er en plass du kan starte.

Lykke til.