CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

larsen45 Juniormester

22. april 2017 - 09:31 Der er 7 kommentarer og
1 løsning

CSS top DIV og tekst nede under

Hej

Skal lige have lidt hjælp til CSS div placering.

Hvordan placeres 2 DIV under hinanden i toppen af en side.
Hvor teksten gå nede under den nederst div.

Som passer til responsive web design
----------------------------------------------
Div med top banner img (100% bredde)
Div med nav top menu (100% bredde)
Tekst ruller nede under DIV som har top menu.

Har prøvet at sætte fixed på de 2 Div men det virker ikke helt som det skal.
For så rykkes DIV med nav menuen helt op i toppen af siden, og top banner nede under.

position: fixed;
width: 100%;
line-height: 0em;
height:auto;
line-height: 0;
margin:0;
padding:0;

Håber der er nogen som kan hjælpe.

Synes godt om

Slater Ekspert

22. april 2017 - 11:12 #1

Jeg tror du må beskrive lidt mere, for umiddelbart lyder det som standardopførslen af div'er.

Hvis du f.eks. bare skriver

<div>A</div>
<div>B</div>
<div>C med tekst</div>

Så vil A ligge øverst og fylde hele bredden, B vil ligge under den og fylde hele bredden, og C med tekst vil ligge neden under B.

Synes godt om

olsensweb.dk Ekspert

22. april 2017 - 12:29 #2

som Slater skriver
"lyder det som standardopførslen af div'er."

med mindre du har noget float ind over (ikke vist)

lav en online demo så vi kan se dit problem

en anden ide kunne være at bruge et framework, der i forvejen tænker responsivt
feks
http://getbootstrap.com/

Synes godt om

larsen45 Juniormester

22. april 2017 - 12:57 #3

Hej tak for jeres hjælp.

Jeg undskylder hvis jeg ikke har forklaret hvad jeg ønsker godt nok.
Når man tager fat i sin eksterne mus og scroller ned af på siden skal teksten kører bagved Div menuen i toppen. ligesom det gør herinde på eksperten eller eksempelvis på
link: http://getbootstrap.com/examples/navbar-fixed-top/

Lige under body har jeg følgende div som det øverste på siden:

<div class="topbanner"><div align="center"><img src="topbanneret.jpg" height="100%" width="100%"></div></div>

Lige nede under har jeg igen en div med selve top menuen i.

<div class="topnavmenu" id="myTopnavmenu">
links til andre sider
</div>

De 2 virker sådan set fint nok og står under hinanden.

Det som så er mit problem, er at hvordan jeg for en 3 div nede under igen med selve indholdet til at kører bagved den div med topmenuen.
Så tekst og alt andet ruller bagved dog med lidt afstand til at starte med så det har lidt afstand i toppen i den 3 div.

Den 3 div hedder så:
<div class="3div">her kommer teksten med indholdet...........</div>

Hvordan skal CSS delen se ud omkring dette?
Med de 3 class.

Jeg håber det har forklaret det bedre end tidligere.

Synes godt om

Slater Ekspert

22. april 2017 - 16:09 #4

Ah, nu er jeg med. Sådan f.eks. (med inline CSS for at det er nemmere at se):

<html>
<body style="padding-top: 50px;">
<div class="top" style="position: fixed; top: 0;">
<div class="top-banner">
Bla bla banner
</div>
<div class="top-menu">
Bla bla menu
</div>
</div>

Indhold her. Behøver ikke være i nogen div, men du kan selvfølgelig bruge alle de tags du vil.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, purus a posuere volutpat, nisi metus elementum elit, ac bibendum massa lorem non purus. Donec urna lacus, tincidunt et venenatis ac, faucibus ut urna. Quisque pulvinar ligula id velit pulvinar dapibus. Etiam sed ornare sem. Etiam ultrices varius mollis. Nam lobortis ultrices neque, id mollis nulla aliquet vel. Fusce in ultricies neque. Maecenas dignissim augue vel nibh venenatis auctor. Mauris id scelerisque nisl, vel fringilla mi. Sed bibendum, tortor eu vestibulum fringilla, orci elit malesuada felis, eget hendrerit ligula purus suscipit mi. Morbi eleifend magna nec dolor auctor, in consectetur mi placerat. Vestibulum varius, turpis at bibendum efficitur, quam metus gravida elit, sit amet imperdiet nunc magna vitae lacus.

</body>
</html>

Synes godt om

larsen45 Juniormester

22. april 2017 - 16:43 #5

Du er bare genial Slater virker perfekt.

Jeg er dog rent ind i et problem i forbindelse med selve teksten visningen uden top menuen.
jeg har lavet forskellige div under hinanden med forskelligt indhold.
Da baggrunden skal være forskellig.

<div class="textindhold">
<h2>overskrift</h2>
<p>selve teksten her</p>
</div>

<div class="textindhold">
<h2>overskrift</h2>
<p>selve teksten her</p>
</div>

og videre derud af.
Selve problemet, er at teksten i toppen ikke er rykket helt ned under topmenuen til at starte med. må være nået med regulering af textindhold afstanden til toppen måske.

Synes godt om

Slater Ekspert

22. april 2017 - 17:07 #6

Ja, padding-top skal reguleres alt efter hvor høj den statiske top af siden er. Den kan du bare sætte op og ned som det passer. Forstår jeg dig ret?

Synes godt om

larsen45 Juniormester

22. april 2017 - 17:27 #7

Ja det er nok bare toppen, som skal reguleres så den starter lige under top menuen.
Lige nu er kun en lille del af indholdet synligt, som op det ligger gemt bagved top menuen og har brug for at blive rykket ned på siden, så det starter med toppen af teksten som kan blive vist.

Synes godt om

larsen45 Juniormester

23. april 2017 - 21:19 #8

Jeg siger ihvertfald mange tak for hjælpen.

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
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

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