Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Schimbare adresa DNS IPv4 pe rout...

Recomandare Barebone

Monede JO 2024

Suprasolicitare sistem electric
 CIV auto import

Mutare in MOZAMBIC - pareri, expe...

Scoatere antifurt airtag de pe ha...

Magnet in loc de clește pent...
 Cumparat/Locuit in apartament si ...

Pot folosi sistemul PC pe post de...

Sokol cu distorsiuni de cross-over

Filtru apa potabila cu osmoza inv...
 Kanal D va difuza serialul “...

Upgrade xiaomi mi11

securitate - acum se dau drept - ...

Farmacia Dr Max - Pareri / Sugest...
 

problema css

- - - - -
  • Please log in to reply
7 replies to this topic

#1
l-software

l-software

    Active Member

  • Grup: Members
  • Posts: 1,010
  • Înscris: 31.01.2009
a trecut o vreme de cand nu am mai scris cod si mai ales css, si am ajuns la un punct mort, o problema cu pozitionarea in css.
lucrez la o tema wordpress si nu reusesc sa asez bara langa articol.
daca pun la divul content "float: left;" bara se aseaza dar divul body nu se lungeste cat articolul, daca scot "float: left;" divul body se lungeste cat articolu dar sidebaru fuge. ce am gresit? codu e scris de mine in totalitate

asta e codu HTML
<!DOCTYPE html>
<html>
<head>
<title>Old School Shit</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="body">
	 <div id="header">


</div>
	 <div id="menu">

	
<a class="menu" href="#"><span class="menu">Acasa</span></a>
<a class="menu" href="#"><span class="menu">Muzica</span></a>
<a class="menu" href="#"><span class="menu">Videoclipuri</span></a>
<a class="menu" href="#"><span class="menu">Poze</span></a>
<a class="menu" href="#"><span class="menu">Evenimente</span></a>
<a class="menu" href="#"><span class="menu">Contact</span></a>

</div>

<div id="content">

	 <div id="posttitle">
<h2>TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE </h2>
</div>

	 <div id="postimage">
<img src="post_image.png">
</div>

<div id="postinfo">
<p id="date">Data:25/03/2012</p>
<p id="category">Categorie:Stiri</p>
<p id="autor">Autor: Lucian</p>
</div>

<div id="post">
<iframe width="600" height="450" src="http://www.youtube-nocookie.com/embed/m-OLJ2SyP10?rel=0" frameborder="0" allowfullscreen></iframe>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat egestas turpis, ut porttitor dolor vehicula nec. Mauris eget lectus a ipsum aliquet vestibulum et sit amet augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eu sapien vel nisl mattis vestibulum. Praesent gravida, diam vel aliquet sollicitudin, enim erat feugiat sem, in luctus velit tortor quis est. Etiam nec pharetra ante. Nunc in imperdiet elit. Sed vitae mi nec justo fringilla feugiat vitae ornare purus. Nam fringilla molestie nulla in pulvinar. Duis tempor nulla ut lorem scelerisque non gravida magna fringilla. Vestibulum vulputate dapibus risus, vitae hendrerit erat fermentum et. Fusce odio nunc, pellentesque ac commodo eget, facilisis laoreet tortor. Curabitur libero dolor, placerat nec bibendum id, dignissim eget orci. Sed vitae ligula lectus. Fusce accumsan, lorem vel tempor adipiscing, quam tellus fringilla mi, sed iaculis nunc diam ac eros. Quisque cursus odio vel sem consectetur non aliquet lacus porttitor.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus neque dui, auctor nec suscipit vel, fringilla vitae turpis. Intege

</div>

</div>

<div id="sidebar">

</div>

</div>
<div id="footer">
<span id="footer">&copy; '012 blabla</span>
</div>

</body>
</html>

si asta CSS:
html {
height: 100%;
width:100%;
}
*
{
margin: 0;
padding: 0;
}
body
{
background-color:white;
}
/*div settings*/
div#body
{
min-height:1200px;
width:921px;
margin:auto;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
background-color:#ffffff;
}
div#header
{
height:250px;
width:100%;
border-bottom: 1px solid #CCCCCC;
}
div#menu
{
margin:auto;
border-bottom: 1px solid #CCCCCC;
text-align: center;
}
div#content
{
float:left;
width:620px;
}
div#posttitle
{
text-align: center;
margin-left:10px;
margin-right:10px;
font-family:Arial,Helvetica,sans-serif;
}
div#postimage
{
border-top: 1px solid #CCCCCC;
width:600px;
height:200px;
border-bottom: 1px solid #CCCCCC;
margin-left:10px;
margin-right:10px;
}
div#postinfo
{
height:15px;
border-bottom: 1px dotted #CCCCCC;
font-family:monospace;
}
div#post
{
text-align: center;
margin-top:20px;
margin-left:10px;
margin-right:10px;
margin-bottom:5px;
font-family:Arial,Helvetica,sans-serif;

}
div#sidebar
{
float:right;
width:300px;
min-height:928px;
border-left: 1px solid #CCCCCC;
}
div#footer
{
position:inherit;
height:15px;
margin:auto;
}
/*Menu settings*/
span.menu
{
color:white;
background-color:#000000;
text-decoration:none;
font-family:Impact, Charcoal, sans-serif;
font-size:15px;
margin-right:5px;
}
span.menu:hover
{
color:black;
background-color:#ffffff;
}
a.menu
{
text-decoration:none;
}
/*post info setts*/
p#date
{
float:left;
}
p#category
{
float:left;
margin-left:110px;;
}
p#autor
{
float:right;
}
/*footer setts*/
span#footer
{
color:white;
background-color:#000000;
font-family:Helvetica, sans-serif;
font-size:12px;
}
span#footer:hover
{
color:black;
background-color:#ffffff;
}



#2
Nemesis-

Nemesis-

    Zeitsă

  • Grup: Senior Members
  • Posts: 7,253
  • Înscris: 23.05.2011
clear dupa #body:
#body:after{
	clear: both;
	content: '';
	display: table;
}


#3
l-software

l-software

    Active Member

  • Grup: Members
  • Posts: 1,010
  • Înscris: 31.01.2009

View PostNemesis-, on 21 septembrie 2012 - 23:17, said:

clear dupa #body:
#body:after{
clear: both;
content: '';
display: table;
}

mersi! asta a rezolvat problemaPosted Image
dar sidebaru'nu se lungeste si el dupa post si degeaba ii dau "min-height:928px; height:100%;"
s.ar lungi daca sar fi incarcat cu continut, dar cum sa.l fac sa se lungeasca chiar daca e gol?

#4
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
Ai incercat cu?
margin-bottom: -1000px;
padding-bottom: 1000px;



#5
l-software

l-software

    Active Member

  • Grup: Members
  • Posts: 1,010
  • Înscris: 31.01.2009

View Postdanutz0501, on 22 septembrie 2012 - 00:59, said:

Ai incercat cu?
margin-bottom: -1000px;
padding-bottom: 1000px;


da, dar nu face decat sa lungeasca sidebaru cu mult peste capatul paginii

#6
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
Ceva de genu?Nu e exclus sa fi gresit ceva pe acolo Posted Image .Unele reguli css pt stilizare interior am sarit peste ele, le pui tu la loc.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" />
<title>Untitled 3</title>
<style>
	 *{
		 margin: 0px;
		 padding:0px;
	 }
	 section, header, nav, article, aside, footer{
		 display: block;
	 }
	 #all{
		 margin: 0px auto;
		 width: 921px;
		 border-left: 1px solid #CCCCCC;
		 border-right: 1px solid #CCCCCC;
		 border-bottom: 1px solid #CCCCCC;
		 background-color:#ffffff;
	 }
	 header{
		 height:250px;
		 border-bottom: 1px solid #CCCCCC;
	 }
	 nav{
		 margin:auto;
		 border-bottom: 1px solid #CCCCCC;
		 text-align: center;
	 }
	 #contenet{
		 display: table;
	 }
	 article, aside{
		 display: table-cell;
	 }
	 article{
		 width: 620px;
	 }
	 aside{
		 width:300px;
		 border-left: 1px solid #CCCCCC;
	 }
	 footer{
		 border-top: 1px solid #CCCCCC;
		 text-align: center;
	 }
	 div#postimage{
		 border-top: 1px solid #CCCCCC;
		 width:600px;
		 height:200px;
		 border-bottom: 1px solid #CCCCCC;
		 margin-left:10px;
		 margin-right:10px;
		 }
	 /*Menu settings*/
	 span.menu{
		 color:white;
		 background-color:#000000;
		 text-decoration:none;
		 font-family:Impact, Charcoal, sans-serif;
		 font-size:15px;
		 margin-right:5px;
	 }
	 span.menu:hover{
		 color:black;
		 background-color:#ffffff;
	 }
	 a.menu{
		 text-decoration:none;
	 }
	 /*post info setts*/
	 p#date{
		 float:left;
	 }
	 p#category{
		 float:left;
		 margin-left:110px;
	 }
	 p#autor{
		 float:right;
	 }
	 /*footer setts*/
	 footer span{
		 color:white;
		 background-color:#000000;
		 font-family:Helvetica, sans-serif;
		 font-size:12px;
	 }
	 footer span:hover{
		 color:black;
		 background-color:#ffffff;
	 }
</style>
</head>
<body>
<section id="all">
<header></header>
<nav>
	 <a class="menu" href="#"><span class="menu">Acasa</span></a>
	 <a class="menu" href="#"><span class="menu">Muzica</span></a>
	 <a class="menu" href="#"><span class="menu">Videoclipuri</span></a>
	 <a class="menu" href="#"><span class="menu">Poze</span></a>
	 <a class="menu" href="#"><span class="menu">Evenimente</span></a>
	 <a class="menu" href="#"><span class="menu">Contact</span></a>
</nav>
<section id="content">
	 <article>
			 <div id="posttitle">
		 <h2>TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE </h2>
		 </div>
		
					 <div id="postimage">
		 <img src="post_image.png">
		 </div>
		
		 <div id="postinfo">
		 <p id="date">Data:25/03/2012</p>
		 <p id="category">Categorie:Stiri</p>
		 <p id="autor">Autor: Lucian</p>
		 </div>
		
		 <div id="post">
		 <iframe width="600" height="450" src="http://www.youtube-nocookie.com/embed/m-OLJ2SyP10?rel=0" frameborder="0" allowfullscreen></iframe>
		 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat egestas turpis, ut porttitor dolor vehicula nec. Mauris eget lectus a ipsum aliquet vestibulum et sit amet augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eu sapien vel nisl mattis vestibulum. Praesent gravida, diam vel aliquet sollicitudin, enim erat feugiat sem, in luctus velit tortor quis est. Etiam nec pharetra ante. Nunc in imperdiet elit. Sed vitae mi nec justo fringilla feugiat vitae ornare purus. Nam fringilla molestie nulla in pulvinar. Duis tempor nulla ut lorem scelerisque non gravida magna fringilla. Vestibulum vulputate dapibus risus, vitae hendrerit erat fermentum et. Fusce odio nunc, pellentesque ac commodo eget, facilisis laoreet tortor. Curabitur libero dolor, placerat nec bibendum id, dignissim eget orci. Sed vitae ligula lectus. Fusce accumsan, lorem vel tempor adipiscing, quam tellus fringilla mi, sed iaculis nunc diam ac eros. Quisque cursus odio vel sem consectetur non aliquet lacus porttitor.
		
		 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus neque dui, auctor nec suscipit vel, fringilla vitae turpis. Intege
		
		 </div>
	 </article>
	 <aside>
	 </aside>
</section>
<footer>
	 <span id="footer">&copy; '012 blabla</span>
</footer>
</section>
</body>
</html>

Si fara 1000 de floturi, le-am  lasat doar pe ale tale, pt stilizarea continutului interior.

Edited by danutz0501, 22 September 2012 - 10:29.


#7
Nemesis-

Nemesis-

    Zeitsă

  • Grup: Senior Members
  • Posts: 7,253
  • Înscris: 23.05.2011

View Postl-software, on 22 septembrie 2012 - 01:27, said:

da, dar nu face decat sa lungeasca sidebaru cu mult peste capatul paginii
pui o imagine de fundal pe #body care sa reprezinte acel sidebar:
http://www.alistapar...es/fauxcolumns/

#8
RCG

RCG

    Senior Member

  • Grup: Senior Members
  • Posts: 2,386
  • Înscris: 20.09.2006
<script>
$(window).load(function(){
$("#content aside").height($("#content article").height());
});
</script>


Pune codul de mai sus in <head>. Mai e o chestie: se foloseste window load si nu document ready pentru ca tu trebuie sa obtii inaltimea articolului dupa incarcarea resurselor externe (imagini spre exemplu).

Anunturi

Neurochirurgie minim invazivă Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate