Gå til innhold

"Boks" + automatisk flytting

s1gh

Av s1gh
i Programmering og webutvikling

Anbefalte innlegg

s1gh

s1gh

Skrevet
Skrevet

Har et problem jeg rett og slett ikke finner en god løsning på.

 

Jeg har en boks (jeg sier boks da det rett og slett ligner på akkurat dette, ettersom jeg har definert en ramme).

Etterhvert som man skriver i den boksen, vil den automatisk utvide seg nedover siden.

 

Men så har det seg slik at jeg har en annen "boks" under den førstnevnte, og hvis den førstnevnte "boksen" blir for stor, legger den seg rett og slett over den 2.

 

Det jeg skulle fått til er den 2. "boksen" flytter seg nedover siden og på den måten forhindrer at den blir overskrevet...

 

 

-Finnes det noen god løsning på dette?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
s1gh

s1gh

Skrevet
  • Forfatter
Skrevet

HTML:

<LINK href="main.css" rel="stylesheet" type="text/css">
<LINK href="links.css" rel="stylesheet" type="text/css">
<html>
<head>

<!-- Banner -->
<p class="banner"></p>
<title>//blog.s1gh-box ~ definition of random</title>
</head>
<body>
<!-- Her starter hovedsiden -->
<div class="menu_cat"><b>Kategorier</b></div>
<!-- Menu for linker og generell navigasjon -->
<br>
<form name="kategorier" action="#" method="POST">
<select id="cat">
<option value="1">Velg en kategori</option>
<option value="2">Nettverk</option>
<option value="3">Sikkerhet</option>
<option value="4">Film</option>
</div>
</select>
<!-- TagCloud -->
<div class="menu_tag"><b>Tags</b></div>
<div class="tagcloud">OPENSUSE<br>
test1 test2 test3 test4 test5 test6 test7
</div>
<!-- Linker -->
<div class="menu_links"><b>Linker</b></div>
<div class="test">Links</div>
<div class="date"><?php include('date.php'); ?></div>
</p>
</body>
</html>

 

 

CSS:

.banner
{
width: 920px;
margin: 36 0 0 -9;
height: 85px;
background: url(images/blog_banner.png);
}
#cat
{ 
position:absolute;
left:35;
top:179;
}
.menu_cat
{
position: absolute;
left:37;
top:160;
font-family: verdana; 
font-size: 9pt; 
color: #5d7a89;
}
.menu_tag
{
position: absolute;
left:37;
top:220;
font-family: verdana; 
font-size: 9pt; 
color: #5d7a89;
}

.tagcloud
{
position: absolute;
width: auto;
max-width: 150px;
border: 1px solid;
left:37;
top:240;
height: auto; 
font-family: verdana;
}
.test
{ 
position: absolute;
left: 37;
top: 380;
width: 150px; 
height: 100px; 
font-family: Verdana; 
border: 1px solid;
font-size: 10pt;
}
.date
{
position: absolute;
left: 250;
top: 160;
width: 80px; 
height: 15px; 
font-family: Verdana; 
border: 1px solid;
color: #21333c;
font-size: 10pt;
}
.menu_links
{
position: absolute;
left:37;
top:360;
font-family: verdana; 
font-size: 9pt; 
color: #5d7a89;
}

 

 

 

Nå skal det sies at jeg har svært lite erfaring med CSS fra før, så noen vil sikkert synes at dette er dårlig skrevet kode! :)

 

Men håper dere ser hva som kan gjøres for å forhindre at "boksen" overlapper den andre.

Lenke til kommentar
AnaXyd

AnaXyd

Skrevet
Skrevet

Oj, oj OJ!

 

Du har tydeligvis misforstått litt, så jeg skal prøve å hjelpe deg på rikig spor igjen.. :)

 

 

- <head> taggen, hva sier den deg? For meg og mange andre tror jeg den sier litt annet enn det du bruker den til. Ser ut som du tror banner og slikt skal ligge i denne, men dette er feil. I denne skal alle metatags, css/java osv preloadinger, title, description, keywords osv inn i. IKKE vanlige tagger som p, h1-6 osv. Mulig det fungerer, men det skal ikke gjøres.

 

- Alle divene dine er satt opp med position:absolute, og en plassering gitt med top og left. Dette fungerer dette også, men det er feil å gå frem på den måten. Når jeg var helt på nybegynnerstadiet gjorde jeg dette selv men det er rett og slett ikke "dugandes" som vi kaller det her jeg bor. Bruk en såkalt wrapper som er rundt alt som er av innholdet. Denne midtstiller sida og gir en bredde til den. Denne kommer rett etter <body>.

Deretter begynner du med kanskje banner, så er det meny, innhold, footer f.eks.

 

Eksempel på en oppbygning:

<div class="wrapper">

<div class="headerwrapper">

<div class="banner">

</div>

<div class="meny">

</div>

</div>

<div class="content">

</div>

<div class="footer">

</div>

</div>

 

Ingen av disse skal assignes med position: absolute, men med en passelig mengde med with, float, margin og padding. Prøv det istedet!

 

- Om du skal skrive noe, så bør det være inne i en hx tagg(h1, h2 osv) eller en p tagg. Om du skal ha skriften bold, så har du begge deler: <p><b>Jeg er bold</b></p>

 

 

Og koden din er litt messy ellers, men faktisk veldig grei.. :) Lykke til!

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...