HTML/CSS Hjälp.

[Romet12]

Hej!
Jag håller på en hemsida som man kan ser på bilden. Jag skulle vilja de de här 2 rutorna där det står server 1 och server 2, ska stå bredvid varandra. Jag förstår inte vad jag gör för fel. Här e koden.

HTML Koden

<div id="news-container-1">
  <h1>Maintenance</h1>
  <h2>We are opening this site very soon!</h2>
</div>

<div id="server-container">
  <div id="server-box">
    <h1>SERVER 1</h1>
    <h2 style="color:#900">OFFLINE</h2>
  </div>
  <div id="server-box">
    <h1>SERVER 2</h1>
    <h2 style="color:#900">OFFLINE</h2>
  </div>
</div>

CSS koden

#server-box, #server-box-2 {
  background-image: url(../img/backgr.jpg);
  background-position: center 0;
  background-repeat: no-repeat;
  text-align: center;
  height: auto;
  width: 235px; /*260px*/
  padding: 15pt;
  margin: auto;
  margin-top: 10pt;
  box-shadow: 0pt 0pt 10px rgb(0, 0, 0);
}

#server-box-2 {
  margin-left: 90pt;
}

#server-container {

}

#news-container-1, #news-container-2 {
  background-image: url(../img/backgr.jpg);
  background-position: center 0;
  background-repeat: no-repeat;
  height: auto;
  width: 490px; /*260px*/
  padding: 15pt;
  margin: auto;
  margin-top: 90pt;
  box-shadow: 0pt 0pt 10px rgb(0, 0, 0);
}

#news-container-2 {
  margin-top: 10pt;
}

#footer_2 {
  position: static;
  margin-top: 10pt;
  text-align: center;
}

h1 {
  font: bold 35px/36px 'purista-web',Arial,sans-serif;
  color: rgb(248, 134, 19);
  padding: 0pt;
  text-transform: uppercase;
  text-shadow: 0pt 0pt 10px rgb(0, 0, 0);
  margin: 0px;
}

h2 {
  font: bold 24px/26px 'purista-web',Arial,sans-serif;
  color: rgb(255, 255, 255);
  padding: 0pt;
  text-transform: uppercase;
  text-shadow: 0pt 0pt 10px rgb(0, 0, 0);
  margin: 0px;
}

h3 {
  font: bold 14px/16px 'purista-web',Arial,sans-serif;
  color: rgb(255, 255, 255);
  padding: 0pt;
  text-transform: uppercase;
  text-shadow: 0pt 0pt 10px rgb(0, 0, 0);
  margin: 0px;
}

h4 { 
  font: bold 11px/12px 'purista-web',Arial,sans-serif;
  color: rgb(255, 255, 255);
  padding: 0pt;
  text-transform: uppercase;
  text-shadow: 0pt 0pt 10px rgb(0, 0, 0);
  margin: 0px;
}

[leoj]

lägg till
float: left;
i #server-box, #server-box-2
sen ändra den nedre
<div id="server-box">
till
<div id="server-box-2">
ta bort
#server-box-2 {
margin-left: 90pt;
}
(ev ändra margin-left: 20px

du kan inte ha två objekt med samma id

använd inte pt, helst endast em, annars är px bra =)

[Romet12]

Ursprungligen postat av leoj

lägg till
float: left;
i #server-box, #server-box-2
sen ändra den nedre
<div id="server-box">
till
<div id="server-box-2">
ta bort
#server-box-2 {
margin-left: 90pt;
}
(ev ändra margin-left: 20px

du kan inte ha två objekt med samma id

använd inte pt, helst endast em, annars är px bra =)

tack! Nu fick jag båda lådorna på samma rad. Men hur får jag de nu till mitten så att de står under Maintenance boxen? Copytight texten står på högersidan och på samma rad som server 1 och server 2 lådorna.

[leoj]

Skicka mig ett PM eller på något vis skicka mig html+css fil, så kan jag nog fixa det snabbt =)

Lite svårt att hänga med nu :P

[Romet12]

jag laddar upp det här.

[leoj]

Tror jag gjort rätt nu

float: left på allt istheshit

[Romet12]

Ursprungligen postat av leoj

Tror jag gjort rätt nu

float: left på allt istheshit

tack! :P Nu funkar det perfekt.