/ 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
positering i ccs sammen med divs
Fra : casper rasmussen


Dato : 04-01-07 07:51

Hej´alle her.

Det er mit første indlæg her på siden, og jeg er rimelig ny til
at lave hjemmeside i divs men har et hvis kendskab til css.

Jeg er ved at uddanne mig som web-integrator og er ved at lave
min første hjemmeside i divs.

Mit spørgsmål er så: kan det passe at man skal rykke hele siden
hvis man lige skal ha presset en tekst ind?
Kan det ikke lade sig gøre at lægge en tekst ind og så resten af
siden rykker tilsvarende ned, her tænker jeg på bordern rundt om
siden samt adr. linjen i bunden.

MVH Hopper

--
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

 
 
Jørgen Farum Jensen (04-01-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 04-01-07 11:04

casper rasmussen skrev:

> Mit spørgsmål er så: kan det passe at man skal rykke hele siden
> hvis man lige skal ha presset en tekst ind?
> Kan det ikke lade sig gøre at lægge en tekst ind og så resten af
> siden rykker tilsvarende ned, her tænker jeg på bordern rundt om
> siden samt adr. linjen i bunden.
>

Det er lidt svær at at forstå problemet, når
du ikke har et link til en side.

En div med noget tekst i og en given bredde
bliver så høj, som indholdet tilsiger. Det
vil sige, hvis du putter noget mere tekst
i rykker div'ens bund længere ned.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i websidekonstruktion:
http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Jørn Andersen (04-01-2007)
Kommentar
Fra : Jørn Andersen


Dato : 04-01-07 12:19

On Thu, 04 Jan 2007 11:03:36 +0100, Jørgen Farum Jensen
<jfjenzen@yahoo.dk> wrote:

>En div med noget tekst i og en given bredde
>bliver så høj, som indholdet tilsiger. Det
>vil sige, hvis du putter noget mere tekst
>i rykker div'ens bund længere ned.

Medmindre man har sat max-height på den (og bruger en browser, der
understøtter det) - Og så er man selv ude om det



Mvh. Jørn

--
Jørn Andersen,
Brønshøj

Jørgen Farum Jensen (04-01-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 04-01-07 15:36

Jørn Andersen skrev:
> On Thu, 04 Jan 2007 11:03:36 +0100, Jørgen Farum Jensen
> <jfjenzen@yahoo.dk> wrote:
>
>> En div med noget tekst i og en given bredde
>> bliver så høj, som indholdet tilsiger. Det
>> vil sige, hvis du putter noget mere tekst
>> i rykker div'ens bund længere ned.
>
> Medmindre man har sat max-height på den (og bruger en browser, der
> understøtter det) - Og så er man selv ude om det
>

Jow da, men vi kan da altid overfalde
Casper, hvis der er det, der er problemet.



--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i websidekonstruktion:
http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

casper rasmussen (04-01-2007)
Kommentar
Fra : casper rasmussen


Dato : 04-01-07 21:34

Hej igen.

Nu har jeg siddet 5-8 timer idag, og jeg kan simpelhen ikke få noget
til at virke.

Jeg har en div som der styre layoutet, border hele vejen rundt om
siden, den har jeg bl.a givet "clear: both;" sammen med bundteksten så
det nederste af siden følger med indholdet.

Men det største problem er at når jeg smider indholdet ind på siden,
ved jeg ikke om jeg skal bruge relative eller absolute, eller noget
helt tredje.
Hele indholdet flyver rundt på siden hver gang jeg ændre noget.

Kan i give et eksempel på hvordan sådan en side skal bygges på?
giver lige et link, men det er kun den side i divs:
http://cprasmussen.homepage.dk/

ps. det er en skolepågave og vi skal lave en hjemmeside om "Bo bedre"


Lidt css kode:

body{
   background-color:   #DCDCDC;
   margin:            0;
   padding:         0;

   
}

#billed_banner{
   height:            92px;
   width:            774px;
   

}

#top_tekst {
   height:            40px;
   width:            774px;
   background-color:   #C1C1C1;
   font-family:      Verdana, Arial, Helvetica, sans-serif;
   font-weight:      bolder;
   font-size:         24px;
   text-align:         center;
   margin-top:         3px;
   
   
}

..navcontainer {
   width:            129px;
   float:            left;
   margin-top:         0px;
   
   }


..navcontainer a {
   font-family:      Arial, Helvetica, sans-serif;
   font-size:         11px;
   color:            #FFFFFF;
   background-color:   #FF0000;
   display:         block;
   padding:         3px;
   width:            120px;
   border-bottom-width:1px;
   border-bottom-style:solid;
   border-bottom-color:#FFFFFF;
   margin:            1px;
   
}
..navcontainer a:link {
   font-family:      Arial, Helvetica, sans-serif;
   font-size:         11px;
   color:             #FFFFFF;
   text-decoration:   none;
   list-style-position:outside;
   background-color:   #FF0000;
      
}
..navcontainer a:visited {
   font-family:       Arial, Helvetica, sans-serif;
   font-size:          11px;
   color:             #FFFFFF;
   text-decoration:    none;
   list-style-position:outside;
}
..navcontainer a:active {
   font-family:       Arial, Helvetica, sans-serif;
   font-size:          11px;
   color:             #660000;
   text-decoration:    none;
   -
   }
..navcontainer a:hover {
   font-family:       Arial, Helvetica, sans-serif;
   font-size:          11px;
   color:             #ffffff;
   text-decoration:    none;
   background-color:   #990000;
   
}



#tablelayout{
   border:            ridge 3px;
   width:            774px;
   clear:            both;
   margin:            10px;

   
}



..brdtxt{
   font:            Verdana, Arial, Helvetica, sans-serif;
   font-size:         12px;
   color:            #000000;

}

#banner{
   height:            100px;
   
   

}

#menu{
   height:            20px;
   width:            774px;
   margin:            auto;
   
   

}



..undertekst2{
   border:            solid 1px;
   border-color:      #565656;
   height:            20px;
   text-align:         center;
   margin:            4px;
   font:            Verdana, Arial, Helvetica, sans-serif;
   display:         inline;
   clear:            both;
   margin-top:         10px;

}



#action{
   margin:      5px;
   



}



#kender_2_1 {
   font-weight:      bold;
   font-size:         14px;
   text-align:         center;
   float:            left;

   

}

#kender_3_1 {
   float:            left;
   position:         relative;
   right:            440px;
   top:            230px;
   width:            300px;
   height:            400px;
   text-align:         center;
   font:            Verdana, Arial, Helvetica, sans-serif;
   font-size:         12px;

   
}

#billed1{
   float:            right;
   bottom:            380px;
   position:         relative;
   right:            10px;

   
   }
   
#billed2{
   float:            left;
   position:         relative;
   bottom:            245px;
   left:            452px;

}

#billed3{
   float:            right;
   position:         relative;
   bottom:            100px;
   left:            140px;


}

#tekst1{
   width:            170px;
   position:         relative;
   bottom:            250px;
   left:            450px;
   font:            Verdana, Arial, Helvetica, sans-serif;
   font-size:         12px;
   float:            left;
}

#tekst2{
   width:            150px;
   position:         relative;
   right:            -130px;
   bottom:            500px;
   font:            Verdana, Arial, Helvetica, sans-serif;
   font-size:         12px;
}

#tekst3{
   width:            160px;
   position:         relative;
   bottom:            350px;
   left:            140px;
   font:            Verdana, Arial, Helvetica, sans-serif;
   font-size:         12px;
}






--
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

Erik Ginnerskov (04-01-2007)
Kommentar
Fra : Erik Ginnerskov


Dato : 04-01-07 22:25

casper rasmussen wrote:

> Nu har jeg siddet 5-8 timer idag, og jeg kan simpelhen ikke få noget
> til at virke.

> Kan i give et eksempel på hvordan sådan en side skal bygges på?
> giver lige et link, men det er kun den side i divs:
> http://cprasmussen.homepage.dk/

Du starter med at lægge det hele i en fælles kasse, der sætter bredden på
din side og centrerer siden i browservinduet. Tildel denne kasse (<div
id="ydre_boks">) css-koden:

#ydre_boks {
width: 780px;
margin: auto;
position: relative:
}

De to første definitioner sætter bredden og centreringen. Sidste definition
sætter et referencepunkt i forhold til hvilket du kan placere sidens
forskellige elementer med position:absolute;.

http://hjemmesideskolen.dk/html/flyd.asp?id=fpx

> Lidt css kode:

[snip en masse css-koder]

Nej tak. Dem kan vi se link til på din side. Du kan ikke skjule det, hvis
browseren kan se det.

--
Godt nytår
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk



casper rasmussen (05-01-2007)
Kommentar
Fra : casper rasmussen


Dato : 05-01-07 09:48

Hej igen.

Nu har jeg rudet en del med det.
Men hvordan skal man positioner alt indholdet af "#indhold"?

--
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

Erik Ginnerskov (05-01-2007)
Kommentar
Fra : Erik Ginnerskov


Dato : 05-01-07 21:50

casper rasmussen wrote:

> Men hvordan skal man positioner alt indholdet af "#indhold"?

Hvem siger, at man skal det? Det er langt mere fleksibelt at lægge det meste
ind uden positionering eller med float.

Men ellers regner du positioneringen ud fra øverste venstre hjørne af
#indhold, hvis du i #indhold har defineret relativ position.

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



Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408926
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste