html - Div hvordan ? - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 > >>

Bruger #2695 @ 18.09.08 12:14

1.963

Hey

Jeg prøver at oversætte følgende til et div:

Kode

<table style="width: 100%; height: 100%">
    <tr>
      <td><img src="top-left.png"></td>
      <td style="background-color: #00ff00"></td>
      <td><img src="top-right.png"></td>
    </tr>
    <tr>
        <td colspan="3" style="background-color: #00ff00; height: 100%">CONTENT</td>
    </tr>
    <tr>
      <td><img src="bottom-left.png"></td>
      <td style="background-color: #00ff00"></td>
      <td><img src="bottom-right.png"></td>
    </tr>
</table>

...til et div, for jeg er ligesom så mange andre løbet ind i IE's elendige tabel håndtering (Firefox gør som jeg vil). Men jeg kan ikke rigtigt få det til at virke.
Det nærmeste jeg er kommet, er at få div'en til at få samme højde som browseren, men da der ligger noget mere i toppen kommer div'et altså til at nå ned under bunden så scrollbaren dukker op. Kan man gøre noget smartere ?

13 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 8 karma

Sorter efter stemmer Sorter efter dato

Bruger #11361 @ 18.09.08 19:45

106

Jeg har selv benyttet en måde hvor jeg har 2 divs i en div for at give effekten.. Altså, således:
HTML:

Kode

<div id="contentRound"> 
 
<div id="contentRoundTop"> 
<img src="content/design/crtL.png" alt="" width="15" height="15" class="corner" /> 
</div> 
 
<div id="content"> 
<p>Hej med dig!</p> 
</div> 
 
<div id="contentRoundBottom"> 
<img src="content/design/crbL.png" alt="" width="15" height="15" class="corner" /> 
</div> 
 
</div>

CSS:

Kode

#contentRound{
	float:left;
	width:780px;
	height:auto;
	margin:20px 20px 0 10px;
	background-color:#ffffff;
}

#contentRoundTop{
	background:url(content/design/crtR.png) no-repeat top right; 
}

#contentRoundBottom{
	background:url(content/design/crbR.png) no-repeat top right;
}

Mit resultat: http://malls.dk/V5/

Bruger #10667 @ 19.09.08 10:48

155

Med CSS kan du vist skrive:

Kode

border-radius: 15px;

Men den er ikke implementeret i alle browsere.

Bruger #11361 @ 18.09.08 12:29

106

Sådan som jeg forstår din kode har du tre inholdsbokse.. Hvis man kan sige det sådan..

En til din top, en til dit indhold og en til din bund.

Sæt en div rundt om det hele, til at holde sammen på alt.

<div id="wrap">

<div id="top"></div>
<div id="indhold"></div>
<div id="bund"></div>

</div>

Bagefter fylder du alt hvad du skal bruge ind i den div.
Herefter definerer du de forskellige størrelser, bredde og højde.

Sig til hvis du vil ha mere hjælp

Bruger #2330 @ 18.09.08 12:52

444

Har lige lavet et lille eksempel på det (jeg tror) du er ude efter:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Test</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<style type="text/css" media="screen">
		* {
			margin: 0;
			padding: 0;
		}
		
		html, body
		{
			height: 100%;
			background-color: #fff;
		}
		
		#outer
		{
			width: 100%;
			height: 100%;
		}
		
		#top
		{
			width: 100%;
			height: 100px;
			background-color: #f0f0f0;
		}
		
		#middle
		{
			width: 100%;
			padding-bottom: 50px;
		}
		
		#bottom
		{
			width: 100%;
			position: absolute;
			bottom: 0;
			height: 50px;
			background-color: #f0f0f0;
		}
	</style>
</head>
<body>
	<div id="outer">
		<div id="container">
			<div id="top">
				Top
			</div>
			<div id="middle">
				Her er content
			</div>
			<div id="bottom">
				Bund
			</div>
		</div>
	</div>
</body>
</html>

Det er vigtigt at ligge mærke til, at padding-bottom på middle og height på bottom er den samme - hvis de ikke er dette, vil de to overlappe hinanden.
Hvis du vil tilføje mere i toppen af dokumentet, altså over content, så vil dette layout stadig virke korrekt.

Indlæg senest redigeret d. 18.09.2008 12:52 af Bruger #2330

Bruger #2695 @ 18.09.08 14:12

1.963

Ok, jeg kan tilnærmelsesvis få det til at virke. Mit problem er at min midte skal have fire billeder (et i hvert hjørne) og det skal jeg også bruge i nogle mindre bokse hvor jeg ikke kan beregne deres absolutte position, så jeg er nødt til at aligne dem i top-venstre, top-højre, bund-venstre og bund-højre i det element som de ligger i, og det kan jeg ikke få til at virke:

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" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            html, body {
                margin: 0px;
                padding: 0px;
                height: 100%;
            }
            div.top {
                width: 100%;
                height: 65px;
                background-image: url(logo-stretch.png);
                background-repeat: repeat-x;
            }
            div.middle {
                width: 100%;
                background-color: #575757;
                bottom: 0px;
            }
            div.left {
                position: absolute;
                left: 0px;
                top: 65px;
                width: 75px;
                bottom: 0px;
                background-color: red;
            }
            div.center {
                position: absolute;
                left: 75px;
                top: 65px;
                right: 285px;
                bottom: 0px;
                background-color: #e2e2e2;
            }
            div.right {
                position: absolute;
                top: 65px;
                width: 285px;
                right: 0px;
                bottom: 0px;
                background-color: blue;
            }
            div.smallbox {
                width: 100%;
                background-color: #e2e2e2;
            }
        </style>
    </head>
    <body>
        <div class="top">
            <img src='logo.png'>
        </div>
        <div class="middle">
            <div class="left">
                Left
            </div>
            <div class="center">
                <div style='height: 15px; width: 100%;'>
                    <img style="background-color: #575757; left: 0px;" src="content-top-left.png">
                    <img style="background-color: #575757; right: 0px;" src="content-top-right.png">
                </div>
                Hello
                <div style='height: 15px; width: 100%; bottom: 0px;'>
                    <img style="background-color: #575757;" src="content-bottom-left.png">
                    <img style="background-color: #575757;" src="content-bottom-right.png">
                </div>
            </div>
            <div class="right">
                <div class="smallbox">
                    <div style='height: 15px; width: 100%;'>
                        <img style="background-color: #575757; left: 0px;" src="content-top-left.png">
                        <img style="background-color: #575757; right: 0px;" src="content-top-right.png">
                    </div>
                    Small content 1
                    <div style='height: 15px; width: 100%; bottom: 0px;'>
                        <img style="background-color: #575757;" src="content-bottom-left.png">
                        <img style="background-color: #575757;" src="content-bottom-right.png">
                    </div>
                </div>
                <br>
                <div class="smallbox">
                    <div style='height: 15px; width: 100%;'>
                        <img style="background-color: #575757; left: 0px;" src="content-top-left.png">
                        <img style="background-color: #575757; right: 0px;" src="content-top-right.png">
                    </div>
                    Small content 2
                    <div style='height: 15px; width: 100%; bottom: 0px;'>
                        <img style="background-color: #575757;" src="content-bottom-left.png">
                        <img style="background-color: #575757;" src="content-bottom-right.png">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Jeg har prøvet at wrappe billerne i <span style='width: 50%; text-align: right;'>..</span> og divs og lidt andet uden held.

Bruger #11361 @ 18.09.08 14:17

106

Er det for at lave runde hjørner eller hvad?

Bruger #2695 @ 18.09.08 14:37

1.963

Er det for at lave runde hjørner eller hvad?

Jep. Er der en smartere måde ? Radius 15px.

Bruger #2695 @ 19.09.08 10:47

1.963

Yay! Fik det endelig til at virke, men det er en lidt grim løsning (synes jeg):

Kode

.tl { width: 100%; height: 100%; background: url(content-top-left.png) 0 0 no-repeat #e2e2e2;}
.tr { width: 100%; height: 100%; background: url(content-top-right.png) 100% 0 no-repeat;}
.bl { width: 100%; height: 100%; background: url(content-bottom-left.png) 0 100% no-repeat;}
.br { width: 100%; height: 100%; background: url(content-bottom-right.png) 100% 100% no-repeat;}
.content { padding: 15px; }

Kode

<div class="center"><div class="tl"><div class="tr"><div class="bl"><div class="br"><div class="content">
    Hello
</div></div></div></div></div></div>

Bruger #11361 @ 19.09.08 10:49

106

Har du prøvet at kigget på den måde jeg foreslog?

Bruger #2695 @ 19.09.08 11:28

1.963

Har du prøvet at kigget på den måde jeg foreslog?

Ja, jeg fik det ikke til at virke :-(
Jeg fik ikke div'ene til at aligne sig til højre eller bund, så det så ikke rigtigt ud, men nu fungerer det vist.

<< < 1 2 > >>

Div hvordan ?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler