html - Tilføjelse af div-bokse - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html

<< < 1 2 3 4 > >>

Bruger #16833 @ 16.11.11 16:13

Hej. Er i gang med at lave en hjemmeside for nogle venner. Jeg har sat designet op i divs og CSS som i også kan se i filerne. Nu har jeg så lige fået at vide at de gerne vil have plads til reklamer på begge sider af designet. Her tænker jeg at jeg skal have oprettet to divs mere et til venstre på 100 px og et til højre på 100 px, som man så kan skrive i. Hvordan får jeg tilføjet de to divs? Har prøvet lidt forskelligt, men det er ikke lykkedes mig endnu.

HTML-koden:

HTML kode

 <body>
 <div id="wrapper">
 <div id="header"></div><div id="menu">
 <a href="#" class="velkommen"></a><a href="#" class="omos"></a><a href="#" class="appen"></a><a href="#" class="maalene"></a><a href="#" class="kontakt"></a><a href="#" class="sidste"></a></div>
 <div id="newsscroll"><marquee align="middle">#1 - Lorem ipsum dolor sit amet #2 - consectetur adipiscing elit. #3 - Nunc sed convallis elit. #4 - Ut sed leo.</marquee></div>
 <div id="content"></div>
 <div id="footer"><br />Copyright © AllergyApp</div>
 </div>
 </body>

CSS:

CSS kode

 body {
     background-color:#f4f4f4;
     font-family:Tahoma, Geneva, sans-serif;
     font-size:12px;
     margin-top:0px;
     margin-left:0px;
 }
 
 #wrapper {
     width:1024px;
     height:800px;
     margin-left:0px;
     margin-top:0px;
 }
 
 #header {
     width:1024px;
     height: 166px;
     background-image:url(billeder/header.gif);
     background-repeat:no-repeat;
 }
 
 #menu {
     width:1024px;
     height:63px;
 }
 
 #menu_velkommen {
     width:274px;
     height:63px;
     background-image:url(billeder/menu_velkommen.gif);
     background-repeat:no-repeat;
     float:left;
 }
 
 #menu_omos {
     width:150px;
     height:63px;
     background-image:url(billeder/menu_omos.gif);
     background-repeat:no-repeat;
     float:left;
 }
 
 #menu_appen {
     width:150px;
     height:63px;
     background-image:url(billeder/menu_appen.gif);
     background-repeat:no-repeat;
     float:left;
 }
 
 #menu_maalene {
     width:150px;
     height:63px;
     background-image:url(billeder/menu_maalene.gif);
     background-repeat:no-repeat;
     float:left;
 }
 #menu_kontaktos {
     width:150px;
     height:63px;
     background-image:url(billeder/menu_kontaktos.gif);
     background-repeat:no-repeat;
     float:left;
 }
 #menu_sidstedel {
     width:150px;
     height:63px;
     background-image:url(billeder/menu_sidstedel.gif);
     background-repeat:no-repeat;
     float:left;
 }
 
 #newsscroll {
     width:1024px;
     height:32px;
     background-image:url(billeder/news_scroll.gif);
     font-size:20px;
 }
 
 #content {
     width:1024px;
     height:491px;
 }
 #footer {
     width:1024px;
     height:48px;
     background-image:url(billeder/footer.gif);
     background-repeat:no-repeat;
     text-align:center;
     font-size:15px;
 }

Jeg har lagt siden op her:
http://jakobnissen.dk/allergyapp
Håber i kan hjælpe.

Indlæg senest redigeret d. 16.11.2011 16:14 af Bruger #16833

34 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #15663 @ 17.11.11 01:49

415

Hej Jakob.

Her er et mark-up samt start på css.

Nu skulle det være nemt for dig at rette det til så det kommer til at være som du gerne vil have det.

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
 <title>Untitled</title>
 <style type="text/css">
 <!--
 body
 {
  margin: 0;
  padding: 0;
 }
 
 #wrapper
 {
  width: 960px;
  margin: 20px auto;
 }
 
 #left
 {
  background: red;
  width: 100px;
  float: left;
  min-height: 500px;
 }
 
 #right
 {
 background: red;
 width: 100px;
 float: right;
 min-height: 500px;
 }
 
 #center
 {
 width: 760px;
 float: left;
 }
 
 #center #header
 {
 background: yellow;
 width: 100%;
 }
 
 #center #menu
 {
 background: blue;
 width: 100%;
 }
 
 #center #newsscroll
 {
 background: green;
 }
 
 #center #content
 {
 background: pink;
 min-height: 450px;
 }
 
 #center #footer
 {
 background: purple;
 }
 -->
 </style>
 
 </head>
 <body>
 <div id="wrapper">
          
          <div id="left">
                      Reklame blok
          </div>
          
          <div id="right">
                      Reklame Blok
          </div>
          <div id="center">
              <div id="header">
                          Header / Logo
              </div>
              <div id="menu">
                          Menu
              </div>
                  <div id="newsscroll">
                              News
                  </div>
                  <div id="content">
                              Content
                  </div>
                  <div id="footer">
                              Footer
                  </div>
          </div>
              
           
 </div>
 </body>
 </html>

Jeg håber det hjalp dig lidt

Bruger #9814 @ 16.11.11 16:50

1.302

Hej Jakob.

Prøv at tage et kig på denne side: http://matthewjamestaylor.com/blog/perfect-3-column.htm

Din nuværende side har også det problem, at der er MEGET spildplads i højre side, ved store skærmopløsninger.

Men linket giver et godt bud på en løsning.

Bruger #16833 @ 16.11.11 17:19

Hej Brian.
Tak for dit svar.
Kan umiddelbart godt se meningen med det der bliver lavet i linket og jeg ved godt at der bliver en hel masse spildplads, og det kan vel løses ved at sætte width til % i stedet for px? Dog har jeg ikke helt fundet ud af hvordan jeg så gør med grafikken når siden har forskellig bredde hele tiden.

Jeg sidder stadig fast med de to bokse.

Edit:
Fik centreret siden for at mindske spildplads.

Indlæg senest redigeret d. 16.11.2011 17:31 af Bruger #16833

Bruger #16649 @ 16.11.11 17:49

Har du prøvet at lave f.eks

HTML kode

 <div id="left"></div>

og til css

CSS kode

 #left {
 width: 100px
 height: auto;
 float:left
 }

Ved ikke om det virker...

(læg den uden for din wrapper, altså lige efter body...

Indlæg senest redigeret d. 16.11.2011 17:50 af Bruger #16649

Bruger #16833 @ 16.11.11 19:40

Hej Jacob.

Det hjalp, nu har jeg fået en boks på venstre side, tak for det.

Dog har jeg stadig problemer med at få en til højre. Har brugt de samme indstillinger, har prøvet float:left og float:right og det virker ikke.

Bruger #16649 @ 16.11.11 19:54

Kunne du prøve at smide det ind på side?

Bruger #16833 @ 16.11.11 19:55

Så skulle den være der.

Bruger #16649 @ 16.11.11 20:31

Prøv smid en ud i højre også...

Bare med samme tekst osv, så jeg kan se hvor den ryger hen

Bruger #16833 @ 16.11.11 20:35

Så er den tilføjet med teksten "Sat med float:right".

Bruger #16649 @ 16.11.11 21:19

Sæt din right ved siden af left(oppe efter body)

Og så lav en

HTML kode

 <div id="clear"></div>

CSS kode

 #clear {
 clear:both;
 }

<< < 1 2 3 4 > >>

Tilføjelse af div-bokse

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler