Notifikationer

Markér alle som læst Log ud

fckcasper Nybegynder

03. juli 2003 - 15:58 Der er 23 kommentarer og
1 løsning

tilpas til alle skærmstørrelser

Jeg vil gerne bruge div til at brygge mit design op, men hvordan gør man så den passer til alle skærmstørrelser og stadig holder sit design? Jeg har prøvet, men det ender altid med at nogen af elementerne flyver rundt.

vil gerne have et link med nogen billeder der er med til, at forklare det

Synes godt om

ztyxx Nybegynder

03. juli 2003 - 16:00 #1

http://www.html.dk/artikler/00043/

Synes godt om

fckcasper Nybegynder

03. juli 2003 - 16:03 #2

Designet skal ikke gå helt ud til kanten som den gør her
http://www.html.dk/artikler/00043/

, men i størrelsen 800*600 skal designet holder sig 10px kanterne og så skal de antal pixels blive større og større jo højre opløsning, lidt lige som www.jubii.dk

Synes godt om

ztyxx Nybegynder

03. juli 2003 - 16:12 #3

det wer jo til at ændre i margin

Synes godt om

fckcasper Nybegynder

03. juli 2003 - 16:16 #4

hvad mener du

Synes godt om

ztyxx Nybegynder

03. juli 2003 - 16:18 #5

#title {
position:absolute;
left:0px;
ændres til
#title {
position:absolute;
left:10px;

så står den 10 pixels inde, fremfor ud til kanten

Synes godt om

fckcasper Nybegynder

03. juli 2003 - 16:21 #6

det har jeg prøvet, men det virker ikke.

css ser sådan her du

body {
background-color: #F0F0F0;

}

#content {

position:absolute;
top: 108px;
right: 112px;
left:112px;
width: 800px;
height: 656px;
background-color: #FFFFFF;
border:0px none ;

}

#logo {

position:absolute;
top: 8px;
left: 112px;
width: 800px;
height: 100px;
background-color: #FdfF0F;
border: 0px none;

}

#ur {

position:absolute;
top: 78px;
left: 871px;
width: 100px;
height: 30px;
background-color: #F8F8F8;
border: 0px none;

}

#leftmenu {

position:absolute;
top: 118px;
left: 171px;
width: 128px;
height: 305px; ;
background-color: #FF3300;
border: 0px none;

}

#rightmenu {

position:absolute;
top: 118px;
left: 843px;
width: 128px;
height: 305px; ;
background-color: #FF3300;
border: 0px none;

}

html ser sådan her ud
<html>
<head>
<title>prøve</title>

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

</head>

<body text="#000000">

<div id="content"></div>
<div id="logo"></div>
<div id="ur"></div>
<div id="leftmenu"></div>
<div id="rightmenu"></div>
</body>
</html>

Synes godt om

ztyxx Nybegynder

03. juli 2003 - 16:32 #7

prøv at bruge right i din rightmenu og så kige det hele grundigt igennem, så er jeg sikker på at du kan få det rettet til, ellers læs linket grundigt igennem igen

Synes godt om

fckcasper Nybegynder

03. juli 2003 - 16:43 #8

Så gå det først galt. Hvis jeg siger, at right- og leftmenu begge skal være 10px inde i henholdsvis højre og venstre og de hver er 50 bedre. Og så siger at content skal være 100%. Når man gør det løber content lang ud over rightmenu. Ved du hvad det er galt.

Synes godt om

htmlaga Nybegynder

03. juli 2003 - 18:14 #9

Du behøver ikke definere en "content" div, men blot indstille marginerne for body.

Synes godt om

htmlaga Nybegynder

03. juli 2003 - 18:23 #10

Her er et eksempel med en højre og venstre menu:

css:

body {
margin: 100px 250px 0px 250px
background-color: #F0F0F0;
}
#leftmenu {
position:absolute;
top: 100px;
left: 100px;
width: 128px;
height: 200px;
background-color: #FF3300;
border: 0px none;
}
#rightmenu {

position:absolute;
top: 100px;
right: 100px;
width: 128px;
height: 200px;
background-color: #FF3300;
border: 0px none;
}

Html:

<html>
<head>
<title>prøve</title>

<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<link rel="stylesheet" type="text/css" href="style2.css">

</head>

<body text="#000000">
Content
<div id="leftmenu">leftmenu<BR>sadasd<BR>sdasd<BR>sdasd</div>
<div id="rightmenu">rightmenu<BR>sadasd<BR>sdasd<BR>sdasd</div>
</body>
</html>

Synes godt om

fckcasper Nybegynder

03. juli 2003 - 19:15 #11

det hjalp ikke på det prøblem jeg har. tror du det vil holde div´er på den plads jeg har givet dem ligegyldigt hvilken opløsning brugeren har hvis jeg bruger position:fixed

Synes godt om

htmlaga Nybegynder

03. juli 2003 - 19:16 #12

Må nok indrømme jeg ikke helt forstår dit problem.

Kender ikke position:fixed, men kan ikke forestille mig det vil hjælpe.

Synes godt om

fckcasper Nybegynder

03. juli 2003 - 22:23 #13

I jubii´s nye design er bygget op med div og css hvordan er det lykkedes dem, at det jeg vil kalde låse deres design så det bare følger skærmen ligegyldigt hvilken opløsning brugeren har og alle elementer stadig holder en god afstand, men designet bare bliver længere.

Håber det hjalp med at forstå hvad jeg mente

Synes godt om

htmlaga Nybegynder

04. juli 2003 - 03:10 #14

Jubii's design er jo netop ikke opbygget, således at det tilpasses alle opløsninger. Det skyldes selvfølgelig at det er opbygget vha. absolute værdier, hvilket du selvfølgelig også kan gøre.

Nå, men er det noget lignende nedenstående du søger:

html:

<html>
<head>
<title>prøve</title>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body text="#000000">
<div id="content">content</div>
<div id="logo">logo</div>
<div id="ur">ur</div>
<div id="leftmenu">leftmenu</div>
<div id="rightmenu">rightmenu</div>
</body>
</html>

css:

body {
background-color: #F0F0F0;
}
#leftmenu {
position:absolute;
top: 110px;
left: 110px;
width: 100px;
height: 305px;
background-color: #FF3300;
border: 0px none;
}
#rightmenu {
position:absolute;
top: 110px;
left: 610px;
width: 100px;
height: 305px;
background-color: #FF3300;
border: 0px none;
}
#content {
position:absolute;
top: 110px;
left: 210px;
width: 400px;
height: 656px;
background-color: #FFFFFF;
border:0px none;
}
#logo {
position:absolute;
top: 10px;
left: 110px;
width: 600px;
height: 100px;
background-color: #FdfF0F;
border: 0px none;

}
#ur {
position:absolute;
top: 80px;
left: 610px;
width: 100px;
height: 30px;
background-color: #F8F8F8;
border: 0px none;
}

Synes godt om

fckcasper Nybegynder

04. juli 2003 - 13:23 #15

Ja, det er sådan, men så vil jeg gerne have at designet centrere sig i alle opløsninger fra 800*600 og opefter lige som jubii gør.

Du kan se hvad jeg mener hvis du gå her ind http://www.echoecho.com/dk/toolresizer.htm og skriver www.jubii.dk og så ser den i forskellige opløsninger

Synes godt om

htmlaga Nybegynder

04. juli 2003 - 18:20 #16

Jeg håber følgende kan bruges:

html:

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Jubii - Forsiden</title>
<meta name="Generator" content="Stone's WebWriter 3.5">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<link href="style.css" media="all" rel="stylesheet" type="text/css">
</head>
<body>

<div id="ydre_div">

<div id="logo">
Logo
</div>

<div id="leftmenu">
Leftmenu
</div>

<div id="content">
Content
</div>

<div id="rightmenu">
Rightmenu
</div>

</div>

</body>
</html>

css:

body {
background-color: #F0F0F0;
text-align:center;
margin: 5px 0px;
}
#ydre_div {
text-align:left;
width:767px;
}
#logo {
background-color: #FdfF0F;
height:100px;
width:100%;
}
#leftmenu, #rightmenu, #content{
float:left;
height:400px;
width:128px;
background-color: #FF3300;
}
#content{
width:511px;
margin:0px;
background-color: #FFFFFF;
}

Mvh
Rasmus Aagaard

Synes godt om

fckcasper Nybegynder

04. juli 2003 - 22:32 #17

Hvis jeg nu og vil have det der ur ind, så det sidder som i det første jeg viste. Hvordan gør man så det?

Synes godt om

htmlaga Nybegynder

05. juli 2003 - 03:21 #18

Følgende løsning er brugbar hvis 'logo'-elementet bare skal indeholdet et baggrundsbillede.
Den er det svære lidt kringlet da 'vertical-align' kun virker på tabeller.

html:

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<meta name="Generator" content="Stone's WebWriter 3.5">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<LINK HREF="style.css" MEDIA="all" REL="stylesheet" TYPE="text/css">
</head>
<body>

<div id="ydre_div" style="border:1px solid">

<div id="logo">
<div style="height:70px"></div>
<div id="ur">Ur</div>

</div>

<div id="leftmenu">
Leftmenu
</div>

<div id="content">
Content
</div>

<div id="rightmenu">
Rightmenu
</div>

</div>

</body>
</html>

css:

body {
background-color: #F0F0F0;
text-align:center;
margin: 5px 0px;
}
#ydre_div {
text-align:left;
width:767px;
}
#logo {
background-color: #FdfF0F;
height:100px;
width:100%;
text-align: right;
}
#ur {
width: 100px;
height: 30px;
background-color: #F8F8F8;

}
#leftmenu, #rightmenu, #content{
float:left;
height:400px;
width:128px;
background-color: #FF3300;
}
#content{
width:511px;
margin:0px;
background-color: #FFFFFF;
}

body {
background-color: #F0F0F0;
text-align:center;
margin: 5px 0px;
}
#ydre_div {
text-align:left;
width:767px;
}
#logo {
background-color: #FdfF0F;
height:100px;
width:100%;
text-align: right;
}
#ur {
width: 100px;
height: 30px;
background-color: #F8F8F8;

}
#leftmenu, #rightmenu, #content{
float:left;
height:400px;
width:128px;
background-color: #FF3300;
}
#content{
width:511px;
margin:0px;
background-color: #FFFFFF;
}

Du bør lige 'rense' koden, da ekspertens brugerflade erstatter tab med et antal mellemrum.

Med venlig hilsen
Aagaard

Synes godt om

htmlaga Nybegynder

05. juli 2003 - 03:21 #19

Arrrh, css'en kom med to gange, beklager!

Synes godt om

fckcasper Nybegynder

05. juli 2003 - 12:21 #20

Uret skal være i højre side og så i bunden af logoet, men teksten skal stadig være align= left

Synes godt om

htmlaga Nybegynder

05. juli 2003 - 19:57 #21

Uret har da hele tiden været i højre side. Hvis du skal skrive i 'logo' div, bliver det hele straks lidt kringlet, men her er da et forslag. Bemærk dog, at området over uret er en 'div' for sig selv:

html:

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<LINK HREF="style2.css" MEDIA="all" REL="stylesheet" TYPE="text/css">
</head>
<body>

<div id="ydre_div" style="border:1px solid">

<div id="logo">
<div id="logo_tekst">Logo</div>
<div id="logo_right"></div>
<div id="ur">Ur</div>
</div>

<div id="leftmenu">
Leftmenu
</div>

<div id="content">
Content
</div>

<div id="rightmenu">
Rightmenu
</div>

</div>

</body>
</html>

css:

body {
background-color: #F0F0F0;
text-align:center;
margin: 5px 0px;
}
#ydre_div {
text-align:left;
width:767px;
}
#logo {
background-color: #FdfF0F;
height:100px;
width:100%;
text-align: left;
}
#logo_tekst {
float:left;
background-color: #FdfF0F;
height:100px;
width:667px;
text-align: left;
}
#logo_right {
float:left;
width: 100px;
height: 70px;
background-color: #FdfF0F;
}
#ur {
float:left;
width: 100px;
height: 30px;
background-color: #F8F8F8;
}
#leftmenu, #rightmenu, #content{
float:left;
height:400px;
width:128px;
background-color: #FF3300;
}
#content{
width:511px;
margin:0px;
background-color: #FFFFFF;
}

Med venlig hilsen
Aagaard

Synes godt om

htmlaga Nybegynder

08. juli 2003 - 14:29 #22

Kan du bruge mit forslag?

Synes godt om

fckcasper Nybegynder

08. juli 2003 - 15:05 #23

tak for din hjælp

Synes godt om

htmlaga Nybegynder

08. juli 2003 - 15:29 #24

Det var så lidt. Tak for point :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS