/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Placering af objecter til alle browsere
Fra : Jegvan


Dato : 05-01-10 15:56

hej jeg har hjemmesiden
www.danishtest.wep.dk

og jeg har problemmer med at aligne objecter inde i en container
til henholdsvis venstre og højre.

jeg vil gerne have sidebar som er en <ul> liste og billeder
placeret i en php som så er plottet på alle andre undersider så
jeg hurtig kan lave ændringer for allesiderne. (den skal være til
venstre, men inde i containeren)

og Newsbar som er lidt det samme (den skal være til højre, men
inde i containeren)



<body>

resten af hjemmesiden her

<div id="container">

<div id="sidebar"><?php include("sidebar.php")?></div>
<div id="newsbar"><?php include("newsbar.php")?></div>

</div>

</body>

style.css

#container {
text-align: left;
margin-left: auto;
margin-right: auto;
width: 1024px;
height:100%;

}



/* Newsbar */

#newsbar {
   
   float: right;
   position:fixed;
top:120px;


}


/* Sidebar */

#sidebar {
   float: left;
position:fixed;
line-height: 200%;
top:120px;


}

men det ser ud som om det kun er sidebar som er aligned til
venstre.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Jegvan (05-01-2010)
Kommentar
Fra : Jegvan


Dato : 05-01-10 16:03

glemte at nævne at jeg har prøvet.
position:absolute; og Position:fixed; men det fik dem til at gå uden
for boxen og forvirrede IE.

og der er en nyere version af container div som er uploadet hvor
align center også duer i IE.

ps. for at se hjemmesiden kræver det en skærm opløsning på minimum
1024 px i bredden.


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birger Sørensen (05-01-2010)
Kommentar
Fra : Birger Sørensen


Dato : 05-01-10 17:43

Jegvan kom med denne ide:
> glemte at nævne at jeg har prøvet.
> position:absolute; og Position:fixed; men det fik dem til at gå uden
> for boxen og forvirrede IE.
>
> og der er en nyere version af container div som er uploadet hvor
> align center også duer i IE.
>
> ps. for at se hjemmesiden kræver det en skærm opløsning på minimum
> 1024 px i bredden.

Hvis du flytter linierne
<html>
<head>
ned efter doctypen, kan det være de 26 valideringsfejl forsvinder.
Hvis du så også angiver doctypen rigtigt
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
kan så være, at browserne kommer i standards mode, og man kan regne med
det man ser, og deres fortolkning af din kode..
Der er "dubletter" af flere tags, som kun må findes een gang (<html>
<head> og <body>), som du bliver nødt til også at fjerne.

Brug i øvrigt validatorerne
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
og ret de fejl de giver dig - før din kode validerer, kan du ikke regne
med det du ser på skærmen.

Det er ikke nogen god idé at bruge position sammen med floet. Float
betyder netop at elementerne flyttes i forhold til det øvrige indhold,
mens position bruges til at anbringe elementerne præsist der hvor man
vil have dem. Så du har sat dig mellem to stole.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



ABJ (06-01-2010)
Kommentar
Fra : ABJ


Dato : 06-01-10 16:31

i IE.
>
> ps. for at se hjemmesiden kræver det en skærm opløsning på minimum
> 1024 px i bredden.
>
Hvorfor laver du så en tabel der kun er 500 Px bred?


Jegvan (06-01-2010)
Kommentar
Fra : Jegvan


Dato : 06-01-10 17:28

ABJ wrote in dk.edb.internet.webdesign.html:
> i IE.
> >
> > ps. for at se hjemmesiden kræver det en skærm opløsning på minimum
> > 1024 px i bredden.
> >
> Hvorfor laver du så en tabel der kun er 500 Px bred?
>

containeren er 1024 px bred, det er bare en textbox

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jegvan (06-01-2010)
Kommentar
Fra : Jegvan


Dato : 06-01-10 20:54

efter noget validering (tak birger)

er de fleste problemmer blevet løst.

men har problemmer med 2 objecter som jeg har included med php.

<body>
<div id="container">

<?php include("sidebar.php")?>
<?php include("newsbar.php"?>

</div>
</body>

men hvis jeg bruger css til at placere dem, følger newsbar bare efter
sidebar.php. de er tilknyttet style.css inde i henholdsvis sidebar.php og
newsbar.php

style.css
______________________________________

#container {
text-align: left;
margin-left: auto;
margin-right: auto;
width: 1024px;
height:100%;
margin: 0 auto;
background-color:#FFFFFF;

}


/* Sidebar */

#sidebar {

margin-left:0px;
margin-right:auto;

line-height: 200%;
width:120px;
z-index:101;
}

#sidebar ul {
   margin: 0;
   padding: 0;
   list-style: none;
}


#sidebar li {
   padding-left: 10px;
   background: url(design/img06.gif) no-repeat left center;
   margin-left: 7px;
   
   border-bottom: 1px dotted #CCCCCC;
}

#sidebar h2 {
   margin: 0;
   padding: 20px 0;
}

#sidebar a {
   text-decoration: none;
}

#sidebar a:hover {
   color: #fdea46;
}


/* Newsbar */

#newsbar {
   
margin-right:0px;
margin-left:auto;

width:219px;
z-index:100;

}

er der nogen der kan gætte på hvordan jeg prøve at adskille dem?







--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birger Sørensen (07-01-2010)
Kommentar
Fra : Birger Sørensen


Dato : 07-01-10 04:28

Den 06-01-2010, skrev Jegvan:
> efter noget validering (tak birger)
>
> er de fleste problemmer blevet løst.
>
> men har problemmer med 2 objecter som jeg har included med php.
>
> <body>
> <div id="container">
>
> <?php include("sidebar.php")?>
> <?php include("newsbar.php"?>
>
> </div>
> </body>
>
> men hvis jeg bruger css til at placere dem, følger newsbar bare efter
> sidebar.php. de er tilknyttet style.css inde i henholdsvis sidebar.php og
> newsbar.php
>
> style.css
> ______________________________________
>
> #container {
> text-align: left;
> margin-left: auto;
> margin-right: auto;
> width: 1024px;
> height:100%;
> margin: 0 auto;
> background-color:#FFFFFF;
>
> }
>
>
> /* Sidebar */
>
> #sidebar {
>
> margin-left:0px;
> margin-right:auto;
>
> line-height: 200%;
> width:120px;
> z-index:101;
> }
>
> #sidebar ul {
>    margin: 0;
>    padding: 0;
>    list-style: none;
> }
>
>
> #sidebar li {
>    padding-left: 10px;
>    background: url(design/img06.gif) no-repeat left center;
>    margin-left: 7px;
>    
>    border-bottom: 1px dotted #CCCCCC;
> }
>
> #sidebar h2 {
>    margin: 0;
>    padding: 20px 0;
> }
>
> #sidebar a {
>    text-decoration: none;
> }
>
> #sidebar a:hover {
>    color: #fdea46;
> }
>
>
> /* Newsbar */
>
> #newsbar {
>    
> margin-right:0px;
> margin-left:auto;
>
> width:219px;
> z-index:100;
>
> }
>
> er der nogen der kan gætte på hvordan jeg prøve at adskille dem?

Tilføj
left : 805px;
til #newsbar
og sæt alle margins til 0px; (Ellers kan der ikke være noget imellem
dem)
Der er heller ikke den store fidus i at junglere med z-index, så længe
du ikke har (vil have) noget der overlapper.

Du har stadig 17 valideringsfejl..

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Erik Ginnerskov (08-01-2010)
Kommentar
Fra : Erik Ginnerskov


Dato : 08-01-10 10:27

Jegvan wrote:
> hej jeg har hjemmesiden
> www.danishtest.wep.dk
>
> og jeg har problemmer med at aligne objecter inde i en container
> til henholdsvis venstre og højre.
>
> jeg vil gerne have sidebar som er en <ul> liste og billeder
> placeret i en php som så er plottet på alle andre undersider så
> jeg hurtig kan lave ændringer for allesiderne. (den skal være til
> venstre, men inde i containeren)
>
> og Newsbar som er lidt det samme (den skal være til højre, men
> inde i containeren)

For at det skal kunne la' sig gi' sig, skal du starte med at tildele
containeren position:relative; - efterfølgende vil absolute-positionerede
elementer inde i containeren have containeren som reference til den
absolutte positionering.

Uden den relative positionering af containeren vil den absolutte
positionering være i forhold til browservinduets indvendige begrænsninger.

--
Med venlig hilsen
Erik Ginnerskov
http://ginnerskov.dk - http://html-faq.dk


Søg
Reklame
Statistik
Spørgsmål : 177459
Tips : 31964
Nyheder : 719565
Indlæg : 6408182
Brugere : 218881

Månedens bedste
Årets bedste
Sidste års bedste