Jump to content
php.lv forumi

DIV tagu novietošana blakus (nevis zem)


Recommended Posts

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... :(

Link to post
Share on other sites

....

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 by reiniger
Link to post
Share on other sites

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 by y2ok
Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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ā.

Link to post
Share on other sites

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 by y2ok
Link to post
Share on other sites

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žģī...

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...