html - 2 boxe ved siden af hinanden (CSS) - Udvikleren.dk

Tags: html css

<< < 1 2 > >>

Bruger #11606 @ 26.04.07 16:00

Hej alle sammen jeg er igang med et design hvor jeg ska have et top logo en venstre menu og så noget indhold.
men jeg kan ik få Menu'en og indhold's boxene til at stå ved siden af hinanden.. nogen der kan hjælpe ?

******Index.html********
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JB-Rustfri.dk</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<base target="iframe" />
</head>

<body>
<div id="box">
<div id="top"></div>

<div id="indhold">Content for id "indhold" Goes Here</div>
<div id="menu">
<a href="forside/index.htm">Forside</a><br />
<a href="profil/index.htm">Profil</a><br />
<a href="produkter/index.htm">Produkter</a><br />
<a href="galleri/index.htm">Galleri</a><br />
<a href="kontakt/index.htm">Kontakt</a><br />
</div>

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

******CSS.css********
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #333333;
background-color: #e0e0e0;
background-repeat: no-repeat;
text-align: left;
}
#box {
height: 540px;
width: 720px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #d4d4d4;
border-right-color: #d4d4d4;
border-bottom-color: #d4d4d4;
border-left-color: #d4d4d4;
margin:0px auto 3px;
background-color: #FFFFFF;
left: 15%;
right: 15px;
}#top {
height: 108px;
width: 688px;
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
background-image: url(images/top.jpg);
background-repeat: no-repeat;
background-position: center top;
}#menu {
height: 364px;
width: 129px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #c3c3c3;
}

a:link {
color: #333333;
text-decoration: none;
cursor: default;
}
a:visited {
text-decoration: none;
color: #333333;
cursor: default;
}
a:hover {
text-decoration: underline;
color: #3E78BA;
cursor: default;
}
a:active {
text-decoration: none;
color: #68CCFE;
cursor: default;#indhold {
height: 300px;
width: 573px;
margin-left: 135px;
}
#indhold {
height: 200px;
width: 500px;
margin-left: 135px;
}

18 svar postet i denne tråd vises herunder
6 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #10377 @ 26.04.07 16:10

Du kan lave en tabel i html:

Kode

<table>
<tr>
<td>
Her skal den ene boks være
</td>
<td>
...og her skal den anden være
</td>
</tr>
</table>

Mvh.
Claus Thomsen

Indlæg senest redigeret d. 26.04.2007 16:10 af Bruger #10377

Bruger #11689 @ 26.04.07 17:19

position:absolute;
left:xxpx;
top:xxpx;

bare absolute potitioner dine elemetner så blir de hvor du vil have dem det enste problem ved at arbejde med absolute værdier er at det kan komme til at se lidt sjovt ud i nogle browsere/opløsninger...
gør det selv på den måde har prøvet med float: men vil vil heller ikk placere sig ordentligt hvis nogen har en anden løsning vil jeg da gerne høre

Bruger #2796 @ 26.04.07 20:28

443

bare lav to bokse typer så..
f.eks.

Kode

<html>
<head>
<style type="text/css">

.box-small, .box-large {
  float: left;
  
  border: 1px solid red;
  margin-left: 10px;
}

.box-small {
  font-size: 10px;
  width: 100px;
  border: 1px solid blue;
}

.box-large {
  font-size: 20px;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}
</style>
<body>
<div class="box-small">test boks</div>
<div class="box-large">test boks 2</div>
</body>
</html>

I starten (.box-small, .box-large {) giver jeg de to bokse de samme egenskaber, og derefter definere jeg de forskellige egenskaber de har.

Håber du kan bruge det.

Bruger #11335 @ 26.04.07 20:52

Her er en løsning udfra din egen kode, det er testet på mac, har desværre ikke pc. Men den vises ens i Firefox, Safari og Opera. Håber det kan hjælpe dig lidt på vej

CSS filen

Kode

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #333333;
background-color: #e0e0e0;
background-repeat: no-repeat;
text-align: left;
}

#box {
overflow: auto;
width: 720px;
border: 1px solid #d4d4d4;
background-color: #FFFFFF;

margin: 0 auto;
padding: 0px 0px 20px 0px;
}

#top {
height: 108px;
width: 688px;
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
background-image: url(images/top.jpg);
background-repeat: no-repeat;
background-position: center top;
}

#indhold {
float: right;
width: 569px;
border: 1px solid red;
height: 540px;
margin-left: 5px;
margin-right: 20px;
margin-top: 5px;
}

#menu {
float: left;
width: 100px;
margin-left: 20px;
height: 500px;
margin-top: 5px;
border: 1px solid #CCCCCC;
}

index filen

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JB-Rustfri.dk</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<base target="iframe" />
</head>

<body>
<div id="box">
<div id="top"></div>

<div id="menu">Menu<br />
Menu<br />
Menu<br />
Menu<br />
Menu<br />
Menu</div>

<div id="indhold"><iframe src="" name="iframe" scrolling="auto">hej</iframe></div>

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

Bruger #10113 @ 27.04.07 19:45

147

Her er en løsning udfra din egen kode, det er testet på mac, har desværre ikke pc. Men den vises ens i Firefox, Safari og Opera. Håber det kan hjælpe dig lidt på vej

CSS filen

Kode

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #333333;
background-color: #e0e0e0;
background-repeat: no-repeat;
text-align: left;
}

#box {
overflow: auto;
width: 720px;
border: 1px solid #d4d4d4;
background-color: #FFFFFF;

margin: 0 auto;
padding: 0px 0px 20px 0px;
}

#top {
height: 108px;
width: 688px;
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
background-image: url(images/top.jpg);
background-repeat: no-repeat;
background-position: center top;
}

#indhold {
float: right;
width: 569px;
border: 1px solid red;
height: 540px;
margin-left: 5px;
margin-right: 20px;
margin-top: 5px;
}

#menu {
float: left;
width: 100px;
margin-left: 20px;
height: 500px;
margin-top: 5px;
border: 1px solid #CCCCCC;
}

index filen

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JB-Rustfri.dk</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<base target="iframe" />
</head>

<body>
<div id="box">
<div id="top"></div>

<div id="menu">Menu<br />
Menu<br />
Menu<br />
Menu<br />
Menu<br />
Menu</div>

<div id="indhold"><iframe src="" name="iframe" scrolling="auto">hej</iframe></div>

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

Hvad laver den frame?

Bruger #10725 @ 23.08.07 17:56

Du kan evt bruge denne video guide http://www.woox.dk/videos/nottablesjustcss/nottablesjustcss.html

Bruger #11606 @ 26.04.07 16:43

så man kan ik gøre det på andre måder end med tabeller ?

Bruger #10113 @ 26.04.07 17:12

147

Jo, drop alt om tabbeller.

Vis du kunne ligge en demo, af din side, ud på nettet så vil jeg kunne sige dig, hvad du skal gøre.

Bruger #2796 @ 26.04.07 18:48

443

værs'go'

Kode

<html>
<head>
<style type="text/css">
.box {
  float: left;
  width: 100px;
  border: 1px solid red;
  margin-left: 10px;
}
</style>
<body>
<div class="box">test boks</div>
<div class="box">test boks 2</div>
</body>
</html>

jeg har sat en border, så du kunne se de to bokse.

Bruger #11606 @ 26.04.07 20:09

Jimmi det virker .. men jeg vil gerne have at den ene box (indhold) ska være større end den anden.. hvordan gør jeg så det ?

<< < 1 2 > >>

2 boxe ved siden af hinanden (CSS)

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler