Notifikationer

Markér alle som læst Log ud

it-interesseret Nybegynder

29. juli 2007 - 15:51 Der er 11 kommentarer og
1 løsning

Div med en lang tekst i, udvider sig hen over en anden div

Hej alle

Jeg er ved at bygge følgende site: http://tinyurl.com/2gbvoz

Jeg har det problem, at content-div’en udvider sig ”hen over” main-bg-div’en, når der er meget tekst i den (altså content-div’en).

Jeg forstår ikke, hvorfor 100% ikke svarer til den plads den (content-div'en) kan få (idet den ligger i main-bg-div’en, som burde styre højden), men blot tager alt den plads (højde), som den skal bruge, hvis teksten er længere end mail-bg-div'ens højde.

Content-div'en skal blot vise sin interne scrollbar, hvis der er for meget tekst i den, så intet tekst "flyder ud over".

Main-bg-div'en skal køre med height angivet i %, fordi den skal kunne fylde en stor skærm lige så godt ud, som en lille skærm.

Da sitet er under opbygning, vil jeg blive glad, hvis I undlader at trække tekst ind her i tråden samt at skrive domæne-navnet mv. Jeg vil helst ikke, at man – før sitet er færdigt – kan google sig frem til information om sitet.

Synes godt om

w13 Novice

29. juli 2007 - 17:24 #1

Har du brugt en overflow i din css?

overflow:auto;

evt. også en max-height:[samme højde som "height"-attributten]

Synes godt om

it-interesseret Nybegynder

29. juli 2007 - 18:32 #2

Jeg har prøvet forskellige ting. Min kode, hvor problemet ligger, ser således ud:

html, body {
height: 90%;
min-height: 600px;
width: 100%;
margin: 0px;
padding: 0px;
background: #74787B;
}

#main_bg {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 668px;
text-align: left;
border: 1px solid #565656;
background: url(../images/blog_bg.png) repeat-y;
/*min-height: 590px;*/
/*max-height: 800px;*/
height: 115%;
}

#center {
text-align: center;
}

#content {
width: 435px; /*2 px mere*/
float: left;
padding-top: 10px;
overflow: auto;

/*min-height: 100px;*/
/*max-height: 65%;*/
height: 60%;
/*position: absolut; */
}

Lige nu går content-rammen ikke ud over main-bg-rammen, men omvendt går den ikke helt ned til slutningen af main-bg-rammen. De følges tydeligvis ikke ad, hvis man ændrer størrelsen på brower-vinduet / ser det på forskellige skærme.

Kan du hjælpe her? Så tekstens bund (content) stopper ved main-bg's bund? Så de flugter på bundlinien.

Synes godt om

kinderaeg Nybegynder

30. juli 2007 - 00:47 #3

Ja, det er jo lidt tricky med en relativ størrelse, som du jo sætter i procent. Som jeg kan se på siden, danner du ikke selv din kode, men du kan, ved at sætte et div rundt om leftcontent og content og fjerne height-attributten på content få det til at se nogenlunde ud, som jeg tror du ønsker det.

Synes godt om

it-interesseret Nybegynder

30. juli 2007 - 12:17 #4

Takker for bidraget :)

Jeg har lagt en div, som omkrænser left-content og content og så har jeg fjernet højden på content, men jeg kan desværre ikke ser forskellen.

Skal der ikke nogle egenskaber ind i den nye div?

Prøv at checke sitet igen :-)

Synes godt om

kinderaeg Nybegynder

30. juli 2007 - 12:42 #5

Prøv at slette height på main_bg og sæt den på content (du kan evt lave min- og max-height, som du har udkommenteret):

min-height: 355px;
max-height: 665px;

Hvis du sætter højden i % bliver den sat til en procentdel af containeren, main_bg, hvilket bliver ret svært at få til at passe, da du laver den relativ i forhold til skærmopløsningen, men samtidig tager 235px fra til din header/menu.
Du kan selvfølgelig også definere højden på den nye div og derefter sætte højden på dine content-divs til 100%.

Synes godt om

kinderaeg Nybegynder

30. juli 2007 - 12:52 #6

I øvrigt bør du nok kigge på din kode for siden generelt. Ud over at din <html> er udkommenteret er der også andre steder hvor standarden du har valgt ikke overholdes. Og hvis du har ambitioner om at skulle rette i koden uden hjælp fra Joomla, ville jeg starte nu, med at få rettet den til, for den er ved at være grim og uoverskuelig. WYSIWYG-editorer er gode til brugere eller uerfarne kodere, men de har en meget slem tendens til at overkomplicere kode :(

Synes godt om

olebole Juniormester

30. juli 2007 - 15:06 #7

<ole>

- og det er stortset umuligt at finde et CMS, der skriver valid kode. Det hænger naturligvis sammen med, at det næsten er umuligt at finde kodere, der skriver valid kode. Jeg tvivler på, der er 1 ud af 100 'professionelle' kodere, der skriver ordentlig kode - nærmer 1 ud af 500! :o|

PS: gåseøjnene om professionelle skyldes, at de jo egentlig ikke burde kaldes sådan, men arbejder for penge på webbureauer ... og hvad skal de så kaldes? =)

/mvh
</bole>

Synes godt om

it-interesseret Nybegynder

05. august 2007 - 11:44 #8

Hej alle

Tak for bidragene. Selvom jeg arbejder i Joomla, koder jeg nu i Notepad++. Joomla giver mulighed for meget, men kan dog ikke hjælpe med en WYSIWYG editor, når det handler om layoutet. WYSIWYG editoren i Joomla anvendes til teksten.

Jeg har dog i mellem tiden givet fuldstændigt op med de dynamiske størrelser og kan ikke få det, som jeg gerne vil have - med mindre jeg går over til frames og det gør jeg ikke.

Så nu har jeg sat hele til 100%, men desværre slår baggrunds-billedet - background: url(../images/blog_bg.png) repeat-y; - i #main_bg ikke i gennem og det kommer ikke til syne i FireFox. I Internet Explorer 7 ser det god rigtigt ud, idet baggrundsbilledet går helt ned til bunden af teksten.

Hvis I kan hjælpe mig hermed, vil jeg være glad. Husk at trykke svar og jeg lukker spørgsmålet herefter :)

Det er sikkert nemt for jer at udregne, hvorfor baggrundsbilledet bliver vist, men jeg er ikke godt til HTML og CSS endnu.

Synes godt om

kinderaeg Nybegynder

05. august 2007 - 17:51 #9

Prøv at sætte et   ind i din main_bg ellers collapser FF containere uden indhold, jeg ved ikke helt hvorfor, men det kan olebole sikkert fortælle dig en hel masse om ;)

Synes godt om

it-interesseret Nybegynder

05. august 2007 - 18:33 #10

Åh, mange tak. Det var løsningen.... ja, hvorfor kollapser div'en i FF, hvis den er tom?

Synes godt om

olebole Juniormester

05. august 2007 - 19:48 #11

Det er en rigtig lang historie, men jeg vil råde til at læse den på W3C ... CSS 2.1 under Table Model =)

Synes godt om

olebole Juniormester

05. august 2007 - 19:50 #12

- dér var den :)
http://www.w3.org/TR/CSS21/tables.html#table-display

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