Panelen



Forumnavigering
Senast inloggade
RSS
Sponsorer

Forum > Klientspråk > CSS

hjälp me div

d3vil
d3vil

Gradering

#13843

Hej

Jag har börjat lära mig om div. Jag kan inte så bra, så detta är min fråga:

<div align=left   valign="top">
<div  class="pagebox" style="width: 547px;">
 <div class="topBar">
  <div class="topText" style="width: 89px; height: 40px">
   STARTSIDAN
   <p><span class="content_text">Alt här</span>
   
 </div>
</div>
</div>
<div align=right   valign="top">
<div  class="pagebox" style="width: 190px;">
 <div class="topBar">
  <div class="topText" style="width: 89px; height: 40px">
   Right
   <p><span class="content_text">Alt här</span>
   
 </div>
</div>
</div>

Hur man kan göra så att tabellen RIGHT ska komma bredvid startsidan typ <td width="5"></td>

 

Hur kan jag göra detta? Kan någon hjälpa mig? Jag vill lära att jobba med DIV, orka med tabeller.

 

ID: #13843 | Skapades: 2008-12-22 23:06:43 | Tråden har 6 svar och har lästs 341 gånger.

Shadi
Shadi

Gradering

#13844

Jag förstår inte riktigt vad du menar. Vill du att DIV med "startsidan" skall vara till vänser och "Right" skall vara bredvid till höger?

---------------  ---------------
| Startsidan |  | Right         |
---------------  ---------------

 

Administratör på AspKoll.se!
ID: #13844 | Skapades: 2008-12-23 01:15:40

d3vil
d3vil

Gradering

#13845

ja ja menar det

ID: #13845 | Skapades: 2008-12-23 01:18:15

Hultin
Hultin

Gradering

#13850

Ett par saker du bör tänka på, det en är att valign, och align är två attribut som sällan bör användas, personligen ser jag ingen anledning att använda dem alls, då innehållet i en div, om inte annat anges, hamnar högstupp i vänster hörn.

Ersättning till valign(middle):

margin-bottom:auto;
margin-top:auto;

Ersättning till align(center):

margin-right:auto;
margin-left:auto;

 

För att lösa ditt problem, så lägg en wrapper runt de båda "tabellerna", alltså ett extra div-element runt om, och sedan sätter du float:left; på start och höger menyns css ids, sedan efter, kan du skapa en ny class, eller helt enkelt lägga detta direkt i ett nytt element, jag brukar göra följande för att "ta bort" floaten, så att dem inte flyter neråt.


Css

.clearit {
clear:both;
}

 

Sedan, precis innan jag avslutar min wrapper lägger jag till detta:

<br class="clearit" />

... ORANGE HEARTS!
ID: #13850 | Skapades: 2008-12-23 15:42:28

Shadi
Shadi

Gradering

#13854

Det där kan du lösa på olika sätt. Du kan t.ex. använda dig av float (http://www.w3schools.com/css/pr_class_float.asp). Säg att du har två st. DIV:ar:

<div class="left">Vänster</div>
<div class="right">Höger</div>

Som du ser så har jag klassnamn på varje div, detta för att jag ska använda mig av CSS. Man kan även ha ID istället för klassnamn, men det är beroende på hur man bygger sin sida. Hur som helst. CSS-koden skulle kunna se ut på detta vis isåfall:

.left {
    width:100px;
    background-color:#000000;
    float:left;
}
.right {
    width:700px;
    background-color:#999999;
}

Ovan ser du att left har fått sig inställningen float:left; vilket kommer att göra att right kommer att ställa sig till höger om den. Ett annat sätt kan vara att använda sig av position(http://www.w3schools.com/Css/pr_class_position.asp):

.left {
    position:absolute;
    width:100px;
    background-color:#000000;
}
.right {
    position:absolute;
    margin-left:100px;
    width:700px;
    background-color:#999999;
}

Så det är upp till dig hur du vill koda sidan.

Administratör på AspKoll.se!
ID: #13854 | Skapades: 2008-12-24 01:41:28

voigtan
voigtan

Gradering

#13859

Anvand dig inte av position absolute i CSS om du inte vill radera alla egenskaper ett element har mot alla andra element som ligger i narheten av sitt element.

Sa det forsta exemplet shadi visar ar det jag hade gatt pa om jag hade gjort nagot kod exempel.

En annan sak som ingen har tagit upp som ar ratt viktigt ar vilken doctye du skall kora pa. Beroende pa vilken doctype du anvander dig olika element har olika egenskaper.

Inline style ar inget du skall anvanda dig av. Gor allt i din css fil vilket kommer ge dig en mer stabil sida och mindre data att behovas laddas om hela tiden.

En helt ok guide pa hur du kan anvanda dig av divar som design tycker jag du kan lasa pa:

http://www.subcide.com/tutorials/csslayout/

Mitt tips ar att du gor en djup dykning i CSS och kolla de flesta attribut och egenskaper du kan satta pa dina HTML element. Ju mer du faktist laser pa ju enklare blir det i framtiden for dig. Man kan lara sig allt men att ha ett hum om hur CSS fungera ar en viktig del for en utvecklare och en definitivt en designer inom webben idag.

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
ID: #13859 | Skapades: 2008-12-24 12:00:29

d3vil
d3vil

Gradering

#13876

tack för er hjäpte ni mycket:)

ID: #13876 | Skapades: 2008-12-26 00:20:01
© Copyright 2007-2009 Shadi Domat | Version 3.0 | Sidkarta | Policy