Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

« 1 / 5 »

Dacia 1316 cu 6 usi ...

Frecventa modificata radio

Un nou pericol pt batrani

Ar trebuii sa vindem imobiliarele...

Dupa renuntarea la aparat dentar

pelerinaj in Balcik

Noul format Jpegli iși propu...

Dade, dade

Probleme accesare nr test telefon

Parola la lock screen

Deparazitare externa pisici fara ...

Seriale turcesti/coreene online H...

Merita un Termostat Smart pentru ...

Sfat achizitie MTB Devron Riddle

Problema mare cu parintii= nervi ...

switch microtik

View New Content

problema css

Last Updated: Sep 30 2012 22:57, Started by l-software , Sep 21 2012 23:05

Please log in to reply

7 replies to this topic

#1
l-software

Posted 21 September 2012 - 23:05

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-

Posted 21 September 2012 - 23:17

Zeits�

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

clear dupa #body:

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

#3
l-software

Posted 21 September 2012 - 23:52

Active Member

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

Nemesis-, on 21 septembrie 2012 - 23:17, said:

clear dupa #body:

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

mersi! asta a rezolvat problema Posted 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

Posted 22 September 2012 - 00:59

Member

Grup: Members
Posts: 437
Înscris: 22.04.2008

Ai incercat cu?

margin-bottom: -1000px;
padding-bottom: 1000px;

#5
l-software

Posted 22 September 2012 - 01:27

Active Member

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

danutz0501, 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

Posted 22 September 2012 - 10:26

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-

Posted 22 September 2012 - 10:29

Zeits�

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

l-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

Posted 30 September 2012 - 22:57

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

Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

www.neurohope.ro

Back to Markup Languages

▶ 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

© 2001-2024 Softpedia. All rights reserved. Softpedia® and the Softpedia logo are registered trademarks of SoftNews Net SRL.
Ora implicita a Forumului Softpedia este ora standard a Romaniei (GMT+2). Mai multe informatii →
⚠ Postarile afisate pe Forumul Softpedia reprezinta o opinie subiectiva a membrilor care le-au publicat si nu a SoftNews Net SRL.

problema css

#1 l-software Posted 21 September 2012 - 23:05

#2 Nemesis- Posted 21 September 2012 - 23:17

#3 l-software Posted 21 September 2012 - 23:52

#4 danutz0501 Posted 22 September 2012 - 00:59

#5 l-software Posted 22 September 2012 - 01:27

#6 danutz0501 Posted 22 September 2012 - 10:26

#7 Nemesis- Posted 22 September 2012 - 10:29

#8 RCG Posted 30 September 2012 - 22:57

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
l-software

Posted 21 September 2012 - 23:05

#2
Nemesis-

Posted 21 September 2012 - 23:17

#3
l-software

Posted 21 September 2012 - 23:52

#4
danutz0501

Posted 22 September 2012 - 00:59

#5
l-software

Posted 22 September 2012 - 01:27

#6
danutz0501

Posted 22 September 2012 - 10:26

#7
Nemesis-

Posted 22 September 2012 - 10:29

#8
RCG

Posted 30 September 2012 - 22:57