Jump to content
php.lv forumi

div table vieta!

Wuu

By Wuu
in CSS

 Share

Recommended Posts

Wuu Newbie

Wuu

Posted
Posted (edited)

Pirmkārt es to 100% uzskatu par pilnīgāko marazmu ,jo pēc tam jābrīnās kāpēc tur vienā browseri tā otrā savādāk... Līkas rokas? Nu nezinu lietojot table ,nebūs milzīgs CSS fails un table ir vieglāk izlasīt saprotamā veidā ,bet tik un tā nu re kas man sanāca

 

CSS

.div_logo {

border-width:thin;

border-style:solid;

border-color: #ddaf7b;

margin-left:1%;

width:98%;

height:40px;

position:fixed;

left:0px;

}

 

.div_menu_left {

border-width:thin;

border-style:solid;

border-color: #ddaf7b;

margin-left:1%;

width:19%;

position:fixed;

left:0px;

top:40px;

}

 

.div_menu_right {

border-width:thin;

border-style:solid;

border-color: #ddaf7b;

margin-left:1%;

width:19%;

position:fixed;

left:79%;

top:40px;

}

 

.div_page {

border-width:thin;

border-style:solid;

border-color: #ddaf7b;

margin-left:1%;

width:60%;

position:fixed;

left:19%;

top:40px;

}

 

html

<html lang="eng">

<head>

<title>xxx</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

 

<body>

<div align='center'>

<div class='div_logo'>Logo</div>

<div class='div_menu_left'>Menu</div>

<div class='div_page'>Page</div>

<div class='div_menu_right'>Menu</div>

</div>

</body>

</html>

 

4ogosrdejdsguqvlro09_thumb.png

 

border-width:thin;

border-style:solid;

border-color: #ddaf7b;

margin-left:1%; //Centrējums

width:60%; //Diva platums

position:fixed; //Ja nelieto fixed tad viss vienā čupa sametas

left:19%; //Sākuma pozīcija x asī

top:40px; //Sākuma pozīcija y asī

 

Vai būs pareizi?

Edited by Wuu
Link to comment
Share on other sites
KarlisBa Newbie

KarlisBa

Posted
Posted (edited)

Tavs pirmais <div> apmēram manā izpildījumā.

#div_logo {
border: 1px solid #ddaf7b;
margin: 0px 0px 0px 1px;
width: 500px;
height: 40px;
float: left;
}

position vietā smukāk ir norādīt float, bet to ir iespējams tikkai pa left un right līdzināt. Nu vispār labot tavu darbu nebūtu prātīgi, jo tu visu raksti %, kas laikam tev ir vēl no table aizķēries. Lielākoties CSS raksta (px).

 

P.S Pareizi būs tad, kad uz visiem pārlūkiem strādās tā kā to tu gribēsi redzēt. :)

Edited by KarlisBa
Link to comment
Share on other sites
LorDRameX Newbie

LorDRameX

Posted
Posted
Tavs pirmais <div> apmēram manā izpildījumā.

#div_logo {
border: 1px solid #ddaf7b;
margin: 0px 0px 0px 1px;
width: 500px;
height: 40px;
float: left;
}

position vietā smukāk ir norādīt float, bet to ir iespējams tikkai pa left un right līdzināt. Nu vispār labot tavu darbu nebūtu prātīgi, jo tu visu raksti %, kas laikam tev ir vēl no table aizķēries. Lielākoties CSS raksta (px).

 

P.S Pareizi būs tad, kad uz visiem pārlūkiem strādās tā kā to tu gribēsi redzēt. :)

 

 

interesanti gan kadeelj CSS raksta lielaako ties PX ???

 

un kā tad ar liquid layout piemēram ? to tu diezinvai ar px uzrakstīsi :)

 

man šo lietu izprast ļoti palīdzēja šis te

Link to comment
Share on other sites
Wuu Newbie

Wuu

Posted
  • Author
Posted (edited)
<div> </div> <div> </div>

Kā panākt lai otrs divs neieto zem pirmā diva ,bet kārtotos vienā līnijā!

 

<div></div> <div></div><div></div>

Kā panāk šādu!

6y094h.png

 

Kā pareizi centrēt divus! Un kā pareizi centrēt uzreiz vairākus divus kas salikti kopā ar css "float:left;"

 

Piezīme lai strādā uz IE6 arī!

Edited by Wuu
Link to comment
Share on other sites
marcis Newbie

marcis

Posted
Posted

es darītu tā:

 

CSS

* {
margin: 0;
padding: 0;
}

#wrapper {
width: 800px;
margin: 0 auto;
}

.column {
float: left;
width: 400px;
height: 400px;
}

* .clear {
height: 0;
font-size: 0; // IE6
clear: both;
}

 

HTML

<div id="wrapper">
<div class="column"> </div>
<div class="column">
 <div class="block"> </div>
 <div class="block"> </div>
</div>
<div class="clear"> </div>
</div>

 

Augstumi, platumi pēc vajadzības.

Link to comment
Share on other sites
Wuu Newbie

Wuu

Posted
  • Author
Posted (edited)

Paldies!

 

.div_menu_down {

margin: 0;

padding: 0;

width:25px;

height:11px;

background-image:url('../images/corner_down.png');

background-position:bottom;

background-repeat:no-repeat;

border:1px solid #000000;

}

 

Kāpēc uz ie6 šis kvadrāts veidojas 25x25 nevis 11x11?

Uz ie7 opera ff rādās 25x11

Edited by Wuu
Link to comment
Share on other sites
Wuu Newbie

Wuu

Posted
  • Author
Posted (edited)

Paldies palīdzēja :)

 

Next...

.table_order {

padding-top:200px;

padding-left:200px;

font:normal 13px arial;

color: #000000;

cursor: default;

clear: both;

}

 

Uz IE6 nestrādā tabulai "<table>' padding... Kamdēļ?

Next..

Vai ievades formu arī vajag veidot no diviem?

screenshot3tm5.png

Edited by Wuu
Link to comment
Share on other sites
LorDRameX Newbie

LorDRameX

Posted
Posted
Tomēr ievades forma paliek table ziņā :)

ja ?

<form class="fieldbox" action="">
  <fieldset>
	<legend>ReÄ£istrÄcijas forma</legend>
	<label for="field1">Logins (4-14):</label> <input type="text" name="field1" id="field1" /><br />
	<label for="field2">Parole (min6):</label> <input type="text" name="field2" id="field2" /><br />
	<label for="field3">Parole x2:</label> <input type="text" name="field3" id="field3" /><br />
	<label for="field4">Emails:</label> <input type="text" name="field4" id="field4" /><br />
	<hr />
	<label for="field5">Blabla:</label> <input type="text" name="field5" id="field5" /><br />
  </fieldset>
</form>

 

kur tur ir tabula

 

PS mad182 super vienkārši un eleganti man patiik tādas formas :)

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...