DIV tagu novietošana blakus (nevis zem)

CasyMan · July 24, 2012

Sveiki.

Esmu iesācis būvēt savu mājaslapu, bet nekādīgi netieku galā ar savu leijautu. Manam lejautam vajadzētu izskatīties šādi.

Šobrīd man visi DIV bloki ir izkārtoti viens zem otra. Neesmu nekāds speciālists iekš css, tāpēc nezinu visas komandas un vaicāju jums, kā lai šos atsevišķos blokus (Menu, Twitter, Instagram) iegūst labajā pusē?

Mājaslapa šobrīd izskatās... šādi.

Mans secret kods index.php lapai:

<html>
<head>
<title>EdzusViksna.lv</title>
<link rel="stylesheet" type="text/css" href="./css/main_style.css" />
<link rel="stylesheet" type="text/css" href="./css/BG.css" />
</head>
<body id="myBody" onLoad="randomClass();">
<script type="text/javascript">
 document.body.style.backgroundImage = 'url(' + [
  'images/HDbg/1.jpg',
  'images/HDbg/2.jpg',
  'images/HDbg/3.jpg',
  'images/HDbg/4.jpg'
 ][Math.floor(Math.random() * 4)] + ')';
</script>
<div class="allpage">
<div class="logo">
 <img src="./images/logo.png" />
 <br style="clear:left"/>
</div>

<div class="menu">
 <ul>
 <li><a href="./index.php">Home</a></li>
 <li><a href="#">About</a></li>
 </ul>
</div>

<div class="blog">
 <div id="nosaukums">
  <p>Nosaukums 1 BLA BLA BLA</p>
 </div>

 <div id="saturs">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat leo in risus placerat sit amet interdum est pulvinar. Donec sit amet ipsum erat. Suspendisse pulvinar, tellus quis pellentesque vestibulum, sem lacus dapibus tellus, ut viverra elit massa quis nisi. Sed vel elit quam. Nulla nec nisi sed lectus viverra cursus sit amet a tellus. Suspendisse potenti. Duis augue urna, vulputate at tempor quis, ultricies quis dolor. Etiam turpis nulla, eleifend nec vulputate ac, elementum interdum nulla. Duis vitae interdum ante. Duis mollis, tellus ac molestie volutpat, velit mi congue velit, non condimentum orci nunc sed odio. Praesent orci sapien, aliquam quis convallis ac, accumsan ut leo.
  <br>
  Vivamus et est tortor, in lacinia erat. Cras hendrerit, nisl ac cursus porta, purus massa pretium lectus, eget auctor diam odio vitae quam. In hac habitasse platea dictumst. Pellentesque sit amet tellus non mauris mollis semper. Quisque ultrices imperdiet est nec placerat. Donec id eros at urna varius bibendum vitae non est. Proin eu eros massa, eu posuere metus. Sed lobortis nisi at quam sodales eget condimentum tellus rhoncus. Phasellus a laoreet nibh. Duis commodo rutrum libero faucibus commodo. In iaculis, purus id cursus adipiscing, enim ipsum consectetur tellus, eu tempor purus sapien a felis. Nullam nec justo nunc, ut convallis massa. Praesent euismod tempor ipsum vitae hendrerit. Fusce eu arcu eget erat dictum mollis.
  <br>
  Donec condimentum lacinia mi eget luctus. Sed vitae libero est. Nullam in turpis eget mi varius vehicula. Ut non nibh et lacus mollis tristique. Pellentesque nec ante id felis ullamcorper consectetur. Donec sed varius nunc. Curabitur blandit turpis eu risus consequat commodo sagittis risus tincidunt. Aliquam varius sollicitudin eros, at ultricies tellus bibendum vel. Donec ultrices aliquet feugiat. Nunc et scelerisque mi. Pellentesque nibh est, dignissim nec tempor quis, gravida nec nibh.<br>
  <p style="text-align:right; display:inline;"><a href="#">Vairāk...</a>
 </div>
</div>

<div class="side">
 <div class="twitter">
  <div class="name">
<p id="name"><b>Twitter</b>
  </div>

  <div class="stuff">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
 version: 2,
 type: 'profile',
 rpp: 5,
 interval: 30000,
 width: 300,
 height: 300,
 theme: {
shell: {
 	background: 'transparent',
 	color: '#ffffff'
},
tweets: {
 	background: 'transparent',
 	color: '#ffffff',
 	links: '#bdffa1'
}
 },
 features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
 }
}).render().setUser('EdzusTikaiTe').start();
</script>
  </div>
 </div>

 <div class="instagram">
  <div class="name">
<p id="name"><b>Instagram</b>
  </div>

  <div class="stuff">
<p><iframe src="http://snapwidget.com/in/?u=ZWR6dXN0aWthaXRlfGlufDEwMHwzfDN8fG5vfDU=" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; height: 315px; margin:15px 0px 0px 0px;"></iframe>
  </div>
 </div>
</div>

</div>
<div class="footer">
 <p>Mājaslapu veidoja <b>Edžus</b></p>
</div>

</body>
</html>

Mans secret kods main_style.css failam:

@font-face {
font-family: 'CenturyGothic';
src: url('../gothic.eot');
src: url('../gothic.eot?#iefix') format('embedded-opentype'),
    	url('../gothic.woff') format('woff'),
    	url('../gothic.ttf') format('truetype'),
    	url('../gothic.svg#gothic') format('svg');
font-weight: normal;
font-style: normal;
}
.allpage {
min-width:500px;
max-width:1300px;
margin:0 auto;
}
.logo {

}
.menu {
float:left;
font-size:14pt;
font-family:CenturyGothic, Arial;
}
.menu ul {
margin:0px; padding:0px;
float:left;
}
.menu ul li {
display:inline;
}
.menu ul li a {
float:left; text-decoration:none;
color:#cccccc;
padding:3px 5px 3px 5px;
margin:15px 10px 0px 0px;
background-color:rgba(0,0,0,.5);
}
.menu ul li a:visited {
color:white;
}
.menu ul li a:hover, .menu ul li .current {
color:white;
background-color:rgba(8,41,0,.5);
}
.blog {
margin-top:65px;
max-width:100%;
color:white;
font-family:Tahoma; Arial;
}
#nosaukums p {
font-size:24pt;
display:inline;
background-color:rgba(0,0,0,.5);
padding:3px 5px 3px 5px;
}
#saturs {
margin-top:15px;
text-align:justify;
}
#saturs p {
font-size:12pt;
display:block;
background-color:rgba(0,0,0,.5);
padding:3px 5px 3px 5px;
}
#saturs p a {
color:white;
text-decoration:none;
}
#saturs p a:hover {
color:white;
text-decoration:underline;
}
#saturs p a:active {
color:white;
text-decoration:none;
}
#saturs p a:visited {
color:white;
text-decoration:none;
}
.side {
margin:20px 0px 0px 0px;
}
.twitter {
color:white;
width:300px;
font-family:Tahoma, Arial;
}
.twitter p {
padding:3px 5px 3px 5px;
background-color:rgba(0,0,0,.5);
}
.twtr-widget {
float:left;
width:300px;
margin:15px 0px 15px 0px;
padding:3px 5px 3px 5px;
background:rgba(0,0,0,.5);
}
.instagram {
color:white;
width:311px;
font-family:Tahoma, Arial;
}
.instagram p {
padding:3px 5px 3px 5px;
background-color:rgba(0,0,0,.5);
}
#name {
font-size:20pt;
display:inline;
}
.footer {
float:right;
font-family:CenturyGothic, Arial;
color:rgba(255,255,255,.7);
font-size:10pt;
margin:100px 20px 0px 0px;
}

Gaidīšu idejas no jūsu puses... :)

P.s. Drošvien neesmu pirmais, kas uzdod šādu jautājumu, diemžēl, esmu pārāk slinks, lai izdomātu ko rakstīt search daļā un sameklētu attiecīgo topiku... :(

daGrevis · July 24, 2012

Nu sāc ar to, ka uztaisi jaunu HTML un CSS tikai ar vajadzīgo leijoutam.

Tad nedaudz, nedaudz palasi par CSS. :)

http://htmldog.com/guides/cssadvanced/layout/

reiniger · July 24, 2012

....

P.s. Drošvien neesmu pirmais, kas uzdod šādu jautājumu, diemžēl, esmu pārāk slinks, lai izdomātu ko rakstīt search daļā un sameklētu attiecīgo topiku... :(

Nu tas ka tu esi slinks par neko labu neliecina. Varbūt padomā vai ir vērts veidot web lapas.

http://www.seriousre...ssidebyside.php

Edited July 24, 2012 by reiniger

marrtins · July 24, 2012

Ko tu mocies, taisi tabulās :)

y2ok · July 24, 2012

Lieto floatus un noņem blogam max-width: 100%; , kā arī uzstādi viņam min-height: 500px; lai viens no tiem sāna blokiem nenoiet zem viņa, ja viņš būs par īsu.

Edited July 24, 2012 by y2ok

CasyMan · July 24, 2012

Nu tas ka tu esi slinks par neko labu neliecina. Varbūt padomā vai ir vērts veidot web lapas.

http://www.seriousre...ssidebyside.php

Paldies. Šis man noderēja. Vadīšos laikam pēc šāda parauga. Mazliet apjuku visā savā bardakā, takā būs jāmēģina no jauna...

defeatlv · July 26, 2012

float: left; un footeree clear: both;

CasyMan · July 26, 2012

float: left; un footeree clear: both;

Tieši tā arī man viss ir. Varat iečekot. http://beast.lv/edz/index.php

Šobrīd problēma ir tāda, ka tas twitter nokrīt zem bloga ieraksta, kad samazina pārlūku zem 1300px (width) platumā. Gribu, lai no sākuma samazina teksta bloku pirms nokrīt tas twitters zem viņa. Divu dienu laikā nespēju atrisināt šo problēmu. Vai kādas idejas?

Papētat kodu... Bloga ieraksta izmēri ir min-width:200px, max-width:950px, gribu lai raksts samazinās pirms nokrīt mala.

defeatlv · July 26, 2012

Tieši tā arī man viss ir. Varat iečekot. http://beast.lv/edz/index.php

Šobrīd problēma ir tāda, ka tas twitter nokrīt zem bloga ieraksta, kad samazina pārlūku zem 1300px (width) platumā. Gribu, lai no sākuma samazina teksta bloku pirms nokrīt tas twitters zem viņa. Divu dienu laikā nespēju atrisināt šo problēmu. Vai kādas idejas?

Papētat kodu... Bloga ieraksta izmēri ir min-width:200px, max-width:950px, gribu lai raksts samazinās pirms nokrīt mala.

iedo skype palīdzēšu PM.

marrtins · July 26, 2012

tabulas esot kaut kas ļauns :D

Tabulas tabulāriem datiem, savukārt DIVi jebūcijai ar pozicionēšanu!! :D :D

y2ok · July 27, 2012

Neliec max-width. Vislabāk liec fiksētu width. Jau augšā minēju. -

min-width: 200px;
max-width: 950px;

Samaini uz -

width: 700px;

un 300px; tad paliks sidebaram.

CasyMan · July 27, 2012

Neliec max-width. Vislabāk liec fiksētu width. Jau augšā minēju. -

min-width: 200px;

max-width: 950px;

Samaini uz -

width: 700px;

un 300px; tad paliks sidebaram.

Un man bloga ieraksts stāvēs vislaik uz 700px, tas tā pat neko nemaina vai ir min un max vai nav. Drīzāk, lai ir, jo gribu lai ieraksts samazinās, bet gribu, lai samazinās pirms tas side nokrīt lejā.

y2ok · July 27, 2012

Nu, ja gribi fluid, tad uzliec blog width: 70% un sidebaram width: 27%;

Vienam elementam lietot width ir slikti, it īpaši, ja tu lieto tikai max-width un min-width.

Edited July 27, 2012 by y2ok

CasyMan · July 27, 2012

Nu, ja gribi fluid, tad uzliec blog width: 70% un sidebaram width: 27%;

Vienam elementam lietot width ir slikti, it īpaši, ja tu lieto tikai max-width un min-width.

Redz, malai arī nevaru likt procentus, jo instagram bildes platumu nedrīkst mainīt. Tas visu sarežģī...

y2ok · July 27, 2012

Nu, tad vienīgā cerība paliek fixed.

Sign In

DIV tagu novietošana blakus (nevis zem)

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation