The text 'Step 1' is not centering on the image no matter what I put in as the margin. I dont have any where to upload atm but heres a screen grab:
http://i.imgur.com/fWrQp.png
I want the text to align with the center of the image.
Any suggestions?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen">
/*<![CDATA[*/
<!--
div.basic{
margin-left: auto ;
margin-right: auto ;
border-style:solid;
width:750px;
}
div.top-level {
/*background-color: #FBEC5D;*/
border-style:solid;
border-color:#0000FF;
margin: 20px 20px 0px 20px;
background: url(light_pink_bg.gif) repeat-y 9px;
}
div.content{
background-color: #EEEEEE;
border-style: dotted;
margin: 5px 5px 5px 48px;
}
.arrow_down
{
background: url(arrow_down.gif) no-repeat 32px 0;
height: 17px;
}
.top-header
{
display: inline;
margin: 0px 0px 30px 25px;
}
.top-text
{
display: inline;
margin: 0px 0px 50px 0px;
}
.step-number
{
display: inline;
height:100%;
}
.active_cnt
{
background: url(light_pink_bg.gif) repeat-y 9px;
}
-->
/*]]>*/
</style>
<title></title>
</head>
<body>
<div class="basic">
<div class="top-level">
<div class="step-number">
<img src="1.png" alt ="1" height="45px" width="45px" />
</div>
<div class="top-text">Step 1</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
Curabitur a odio lacus. Nam porttitor odio nec quam suscipit rutrum. <br />
Etiam velit felis, bibendum et tincidunt et, porta eget neque. <br />
Proin id sapien nec risus congue malesuada vitae ut lorem.<br />
Proin diam eros, porttitor id rutrum quis, tempus hendrerit nisl.
</p>
</div>
</div>
<div class="arrow_down">
</div>
</div>
</body>
</html>
Does this get the effect you are after
.top-text
{
/*display: inline;
margin: 0px 0px 50px 0px;*/
margin:auto;
text-align:center;
}
Or, if I read it a different way you might mean this:
.top-text
{
display: inline;
position:relative;
float:left;
margin-top:5px;
}
.step-number img
{
float:left;
height:100%;
}
div.content{
background-color: #EEEEEE;
border-style: dotted;
margin: 55px 5px 5px 48px;
}
You might need to play with the margin in div.content to get the top spacing you want.
Related
I'm trying to generate reports with header, footer and content. The header and the footer works fine, however the text of the content div breaks higher than I want. See the image. I really don't understand why the page is breaking so high.
This is the CSS code:
#page {
margin: 180px 50px;
}
#header {
position: fixed;
left: 0px;
top: -150px;
right: 0px;
height: 150px;
text-align: left;
}
#footer {
position: fixed;
left: 0px;
bottom: -180px;
right: 0px;
height: 80px;
text-align: right;
background-color: lightblue
}
#footer .page:after {
content: counter(page, upper-roman);
}
#content {
padding-left: 10mm;
padding-right: 5mm;
line-height: 6mm;
background-color: lightgreen;
height: 850px;
}
#logo {
height: 4cm;
}
#head_text {
display: inline-block;
line-height: 6mm;
padding-top: 15px;
}
And this is the HTML:
<html>
<head>
<style>
'.$css.'
</style>
</head>
<body>
<div id="header">
'.$header.'
</div>
<div id="footer">
<p class="page">Página </p>
</div>
<div id="content">
'.$content.'
</div>
</body>
</html>
Could anyone help to solve this problem? Tanks!
If your DOMPDF_DPI is set to 72 then a 180px margin is pretty expansive. A DPI of 72 gives a one-to-one translation from PX to PT (the native unit in a PDF). PDF documents produced by dompdf are always 72 PPI. That translates into 2.5 inches of margin around the content. I don't think you meant to pad your margins quite that much.
Another problem I see is that you've set a height condition on your content element. You don't really need this and I see it causing some problems as I run some test renders. If you want your content background to have a specific color then I'd recommend setting it on the body element, which is the true bounds of your document content.
Try the following:
#page {
margin: 180px 50px;
}
#header {
position: fixed;
left: 0px;
top: -150px;
right: 0px;
height: 150px;
text-align: left;
}
#footer {
position: fixed;
left: 0px;
bottom: -180px;
right: 0px;
height: 80px;
text-align: right;
background-color: lightblue
}
#footer .page:after {
content: counter(page, upper-roman);
}
body {
background-color: lightgreen;
height: 850px;
}
#content {
padding-left: 10mm;
padding-right: 5mm;
line-height: 6mm;
}
#logo {
height: 4cm;
}
#head_text {
display: inline-block;
line-height: 6mm;
padding-top: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="footer">
<p class="page">Página </p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id erat blandit, auctor massa eu, aliquam lacus. Suspendisse justo ante, gravida vel diam quis, porta luctus nisi. Donec id enim sem. Sed et lobortis magna. Ut et dignissim augue. Cras quam libero, feugiat ac auctor eget, semper a augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse quis hendrerit ex. Phasellus auctor dolor sit amet nibh rhoncus sagittis. Sed quis odio sit amet purus feugiat malesuada.</p>
</div>
</body>
</html>
See demo and source CSS+HTML (via view source) at http://arcane-earth-5322.herokuapp.com/
Driving me nuts trying to get the button and search box to be the exact same height, same position (horizontally aligned) and same font. I have got it close, but no cigar.
Zoom in 200% to see the difference in height. The search box is 1-2px taller and looks to be fractionally lower on the page.
I also don't understand why the computed font sizes for the button and search box are different at most zoom levels (inc. 100%).
EDIT: Adding the code below:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1" />
<title>Responsive Test</title>
<style type="text/css">
body {
color:#555;
font-family:'Helvetica Neue';
font-size:110%;
line-height:140%;
margin:0;
padding:0;
-moz-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
background:url(http://d7mj4aqfscim2.cloudfront.net/images/landscapes/duo-land_mv_c9ad01b8dcb245a1140bd5cb57158ba6.jpg) no-repeat center center fixed;
}
#header1 {
background-color:#60affe;
color:#fff;
text-align:center;
padding:10px 0px;
margin:auto;
}
#header2 {
background-color:#8fc7fe;
color:#fff;
text-align:center;
padding:10px 0px;
margin:auto;
}
#content {
margin-left:auto;
margin-right:auto;
background-color:#fafafa;
border:1px solid #ddd;
}
#content-content {
clear:both;
padding:5%;
}
#button-container {
float:left;
margin-top:15px;
text-align:center;
width:100%;
}
.button {
display:inline-block;
margin:10px;
padding:10px;
background-color:#efefef;
border:1px solid #ccc;
border-radius:2px;
color:#555;
max-width:220px;
min-width:220px;
}
.search {
display:inline-block;
}
.search_box {
margin:10px;
padding:10px;
border:1px solid #ccc;
border-radius:2px;
max-width:220px;
min-width:220px;
color:#555;
font-family:'Helvetica Neue';
font-size:110%;
line-height:140%;
font-weight:200;
}
#media (min-width: 1024px) {
#header1 { width:50%; }
#header2 { width:50%; }
#content { width:50%; }
}
#media (min-width: 768px) and (max-width:1023px) {
#header1 { width:80%; }
#header2 { width:80%; }
#content { width:80%; }
}
#media (max-width: 767px) {
#header1 { width:100%; }
#header2 { width:100%; }
#content { width:100%; }
body { font-size:140%; }
}
</style>
</head>
<body>
<div id="header1">Header 1</div>
<div id="header2">Header 2</div>
<div id="content">
<div id="button-container">
<div class="button">
Button 1
</div>
<div class="search">
<input class="search_box" name="search" placeholder="Search..." />
</div>
</div>
<div id="content-content">
<p>
Etiam at purus id ipsum sodales vehicula. Nam purus nunc, luctus ut laoreet et, pharetra eget est. Nulla
nisi tellus, euismod vel hendrerit dignissim, egestas eget ante. Morbi pellentesque, tellus ut adipiscing
vestibulum, purus orci gravida felis, sit amet rhoncus quam nulla non massa. Sed volutpat porttitor lectus
accumsan hendrerit. Donec lectus urna, euismod ut accumsan ac, congue in risus.
</p>
</div>
</div>
</body>
</html>
.search_box {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 2px;
max-width: 220px;
padding-top: 11px;
min-width: 220px;
color: #555;
height: 24px;
font-family: 'Helvetica Neue';
font-size: 110%;
line-height: 140%;
font-weight: 200;
}
and why this div around the search box? It's not the best practice to have a div element inline with something else.
Set the font-size: 110%; to the button as well.
I'm working on a one page site, and I modified the html to have six sections. It works perfectly on all browsers except for internet explorer. It kicks me to in between the second last and last two sections (on the modified version with one additional section) I've tried taking off the js query, but that did nothing, which confirmed my suspicion that it was something to do with css. I'm very new at web design and I'm not sure what to adjust please take a look at the code below (this is the version without the additional section):
Html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="metro, free website template, beautiful grid, image grid menu, colorful theme" />
<meta name="description" content="Metro is a free website template by templatemo.com and it features jQuery horizontal scrolling among pages." />
<link href="templatemo_style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/JavaScript" src="js/slimbox2.js"></script>
</head>
<body>
<div id="templatemo_header">
<div id="site_title"><h1>Metro</h1></div>
</div>
<div id="templatemo_main">
<div id="content">
<div id="home" class="section">
<div id="home_about" class="box">
<h2>Welcome</h2>
<p>Metro is a free website template for everyone from templatemo.com and it can be used for any purpose. Validate <strong>XHTML</strong> & <strong>CSS</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus felis leo, feugiat sed porttitor sagittis, facilisis sit amet lectus. Aenean elementum tellus auctor dolor auctor luctus. Vivamus eu orci purus, ut vulputate nisl.</p>
<p>Praesent imperdiet mauris et lorem malesuada consequat. Proin nisl metus, faucibus vitae malesuada non, interdum sed felis. Sed ut turpis feugiat lorem faucibus dignissim. Donec magna tellus, feugiat vel fermentum eget, fringilla at metus.</p>
</div>
<div id="home_gallery" class="box no_mr">
<img src="images/gallery/01.jpg" alt="image 1" />
<img src="images/gallery/02.jpg" alt="image 2" />
<img src="images/gallery/03.jpg" alt="image 3" />
<img src="images/gallery/04.jpg" alt="image 4" />
<img src="images/gallery/05.jpg" alt="image 5" />
<img src="images/gallery/06.jpg" alt="image 6" />
</div>
<div class="box home_box1 color1">
<img src="images/templatemo_services.jpg" alt="Services" />
</div>
<div class="box home_box1 color2">
<img src="images/testimonial.jpg" alt="Testimonial" />
</div>
<div class="box home_box2 color3">
<div id="social_links">
<img src="images/facebook.png" alt="Facebook" />
<img src="images/flickr.png" alt="Flickr" />
<img src="images/twitter.png" alt="Twitter" />
<img src="images/youtube.png" alt="Youtube" />
<img src="images/vimeo.png" alt="Vimeo" />
<div class="clear h20"></div>
<h3>Social</h3>
</div>
</div>
<div class="box home_box1 color4 no_mr">
<img src="images/contact.jpg" alt="Contact" />
</div>
</div> <!-- END of home -->
<div class="section section_with_padding" id="services">
<h2>Services</h2>
<div class="img_border img_fl">
<img src="images/templatemo_image_03.jpg" alt="image" />
</div>
<div class="half right">
<ul class="list_bullet">
<li>Maecenas ac odio ipsum donec cursus</li>
<li>Fusce risus tortor, interdum</li>
<li>Proin facilisis ullamcorper</li>
<li>Sed vel justo quis ligula</li>
<li>Ut tristique sagittis arcu</li>
<li>Maecenas ac odio ipsum donec cursus</li>
<li>Fusce risus tortor, interdum</li>
</ul>
</div>
<div class="clear h40"></div>
<div class="img_border img_fr">
<img src="images/templatemo_image_04.jpg" alt="image" />
</div>
<div class="half left">
<p><em>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam mauris ipsum, pulvinar sit amet varius at, placerat ut felis.</em></p>
<p>Donec vitae tortor non ipsum tristique condimentum ac ac nulla. Etiam sagittis iaculis dolor ut euismod. Nam faucibus, risus at consequat malesuada, urna turpis sagittis libero, sodales hendrerit dui arcu et nisi. Praesent pulvinar, dolor id lacinia pulvinar, mi ligula tempor libero, et semper sem dolor et elit. </p>
</div>
home
Previous
Next
</div>
<div class="section section_with_padding" id="testimonial">
<h2>Testimonial</h2>
<p><em>Aliquam venenatis, quam a semper blandit, lectus mi convallis orci, ut dictum ante leo non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat, urna in gravida rhoncus, mi elit luctus nibh, a luctus erat elit vel quam. </em></p>
<div class="clear h40"></div>
<div class="half left">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 1" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Walker - <span>TemplateMo.com</span></cite>
</div>
<div class="half right">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 2" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Jason - <span>TemplateMo.com</span></cite>
</div>
<div class="clear h40"></div>
<div class="half left">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 3" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Danny - <span>FlashMo.com</span></cite>
</div>
<div class="half right">
<div class="img_border img_fl">
<img src="images/templatemo_image_01.jpg" alt="image 4" />
</div>
<p>Fusce nec felis id lacus sollicitudin vulputate. Proin tincidunt, arcu id pellentesque accumsan, neque dolor imperdiet ligula. </p>
<cite>Katey - <span>KoFlash.com</span></cite>
</div>
home
Previous
Next
</div>
<div class="section section_with_padding" id="contact">
<h2>Contact</h2>
<div class="half left">
<h4>Quick Contact Form</h4>
<p>Nullam a tortor est, congue fermentum nisi. Maecenas nulla nulla, eu volutpat euismod, scelerisque ut dui.</p>
<div id="contact_form">
<form method="post" name="contact" action="#contact">
<div class="left">
<label for="author">Name:</label> <input name="author" type="text" class="input_field" id="author" maxlength="40" />
</div>
<div class="right">
<label for="email">Email:</label> <input name="email" type="text" class="input_field" id="email" maxlength="40" />
</div>
<div class="clear"></div>
<label for="text">Message:</label> <textarea id="text" name="text" rows="0" cols="0"></textarea>
<input type="submit" class="submit_btn float_l" name="submit" id="submit" value="Send" />
</form>
</div>
</div>
<div class="half right">
<h4>Mailing Address</h4>
460-820 Duis lacinia dictum, <br />
Vestibulum auctor, 12650<br />
Nam rhoncus, diam a mollis<br />
<strong>Email: info[ at ]companyname[ dot ]com</strong><br />
<div class="clear h20"></div>
<div class="img_nom img_border"><span></span>
<iframe width="320" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Central+Park,+New+York,+NY,+USA&aq=0&sll=14.093957,1.318359&sspn=69.699334,135.263672&vpsrc=6&ie=UTF8&hq=Central+Park,+New+York,+NY,+USA&ll=40.778265,-73.96988&spn=0.033797,0.06403&t=m&output=embed"></iframe>
</div>
home
Previous
</div>
</div>
</div>
</div>
<div id="templatemo_footer">
Copyright © 2072 Your Company Name | Designed by Free CSS Templates
</div>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
color: #ddd;
font-size: 12px;
line-height: 1.6em;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #000;
}
a, a:link, a:visited { color: #9CF; font-weight: normal; text-decoration: none }
a:hover { color: #FF6; text-decoration: none; }
ul, li {
padding:0;
margin:0;
list-style:none;
}
h1, h2, h3, h4, h5, h6 { color: #fff; font-weight: normal; }
h1 { font-size: 58px; margin: 0 0 30px; padding: 5px 0 }
h2 { font-size: 34px; margin: 0 0 30px; padding: 5px 0 }
h3 { font-size: 20px; margin: 0 0 20px; padding: 0; }
h4 { font-size: 16px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 14px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 12px; margin: 0 0 5px; padding: 0; font-weight: 700 }
p { padding: 0; margin: 0 0 15px 0 }
.clear{
clear:left;
}
cite { font-weight: bold; color:#fff; }
cite a, cite a:link, cite a:visited { font-size: 12px; text-decoration: none; font-style: normal }
cite span { font-weight: 400; color: #ccc; }
.list_bullet { margin: 0 0 10px 15px; padding: 0; list-style: none }
.list_bullet li { color:#fff; margin: 0 0 7px 0; padding: 0 0 0 20px; background: url(images/templatemo_list.png) no-repeat scroll 0 6px }
.list_bullet li a { color: #fff; font-weight: normal; text-decoration: none }
.list_bullet li a:hover { color: #fff }
.no_bullet { margin: 0; padding: 0; list-style: none }
.no_bullet li { margin: 0 0 20px 0; padding: 0 }
a.header { display: block; font-weight: 700 }
.half { width: 370px }
.h20 { height: 20px }
.h40 { height: 40px }
img { margin: 0; padding: 0; border: none }
.img_border { background: #fff; padding: 4px; border: 1px solid #ccc }
.img_nom { display: inline-block; margin-bottom: 15px }
.img_fl { float: left; margin: 3px 15px 5px 0 }
.img_fr { float: right; margin: 3px 0 5px 15px }
.left { float: left }
.right { float: right }
#templatemo_header {
width: 800px;
margin: 0 auto;
padding: 30px 0;
}
#templatemo_main {
width: 800px;
height: 487px;
overflow: hidden;
margin: 0 auto;
}
#templatemo_footer {
width: 800px;
margin: 0 auto;
padding: 20px 0;
text-align: right
}
#site_title { display: block }
#site_title a { color: #fff; font-weight: 700; letter-spacing: 10px; line-height: 30px }
#content{
overflow:hidden;
width: 7000px;
position:relative;
height: 487px;
}
.section {
position:relative;
float:left;
width: 800px;
height: 487px;
margin-right: 20px;
}
.section a.slider_nav_btn { position: absolute; top: 0; width: 50px; height: 46px; display: block; background-image: url(images/slider_nav_btn.jpg); text-indent: -10000px }
.section a.home_btn { right: 50px; background-position: 102px 0 }
.section a.previous_btn { right: 100px; background-position: 0 0 }
.section a.next_btn { right: 0px; background-position: 50px 0 }
.box { float: left; margin: 0 10px 10px 0 }
#home_about { width: 314px; height: 314px }
#home_gallery { width: 476px; height: 314px }
.home_box1 { width: 152px; height: 152px }
.home_box2 { width: 314px; height: 152px }
.color1 { background: #d0b500 }
.color2 { background: #c75000 }
.color3 { background: #00afce }
.color4 { background: #a4c700 }
#home_gallery a { display: block; float: left; width: 152px; height: 152px; margin: 0 10px 10px 0 }
#home_gallery a.no_mr { margin-right: 0 }
#social_links {
text-align: center;
padding: 40px 0 0 0
}
#social_links a {
display: block;
float: left;
width: 48px;
height: 48px;
margin-left: 12px
}
#gallery {
}
#gallery li {
width: auto;
height: auto;
float: left;
width: 152px;
height: 245px;
background: none;
margin: 0 10px 10px 0;
}
#gallery li a {
display: block;
}
#gallery li a img { }
#gallery li.no_margin_right { margin-right: 0 }
#contact_form { padding: 0; width: 330px }
#contact_form form { margin: 0px; padding: 0px; }
#contact_form form .input_field { width: 150px; padding: 5px; color: #CCC; border: 1px solid #666; background: #222; margin-bottom: 10px; }
#contact_form form label { display: block;font-size: 11px }
#contact_form form textarea {
clear: both;
width: 320px; height: 120px;
padding: 5px;
color: #CCC;
border: 1px solid #666;
font-family: Arial, Helvetica, sans-serif;
background: #222;
margin-bottom: 10px;
}
#contact_form form .submit_btn { font-size: 12px; background: #333; color: #CCC; cursor:pointer; border: 1px solid #666; padding: 5px 10px; }
.no_mr { margin-right: 0 }
I'm pretty sure the problem is either here:
#templatemo_main {
width: 800px;
height: 487px;
overflow: hidden;
margin: 0 auto;
}
or here:
#content{
overflow:hidden;
width: 7000px;
position:relative;
height: 487px;
}
I'm not sure what to adjust and any help would be appreciated a lot!
PS: I'm new to stack over flow and I don't know if this is the type of questions you're supposed to be asking. Please let me know if it isn't ! :)
As the support of CSS3 in IE10 is good enough, I guess you're testing your site against old versions of that browser.
There is a lot of css elements that won't work on old IE versions. I suggest you use some library like Modernizr to get a little more compatibility.
Your code is too extensive for the little info you provide. What's the exact error you're observing? But taking a fast look I see some "display: inline-block;" that certainly may not work. You should try the combination of "float: left;" with "display: block" and a given width for those elements.
If you specify a bit more the exact error you're finding, so we can point ourselves on the relevant part of the code, maybe you could get more help.
Good Day Im new to CSS
And recently after I have finish my first project, an extra white space came up on my page, Then I have found out that the hr tag that I am using is one reason why there an extra white space(I guess?) , when I put hr size
#hr{
width:960px;
margin: 0px auto;
color:#C0C0C0;
height: 12px;
margin-bottom:15px;
overflow:hidden;
}
white page will appear
But when I put
#hr {
width:70%;
margin: 0px auto;
color:#C0C0C0;
height: 12px;
margin-bottom:15px;
overflow:hidden;
}
This will be ok but zooming it in/out will move the hr line,
If needed I'll post the codes but my codes is so many...
Right, I think ill put my codes,
HTML CODES:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beginner</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
</style>
</head>
<body>
<div id="top-most">
</div>
<div id="wrapper">
<div id="logo">
<img alt="logo" src="images/logo.png" />
</div>
<div id="header">
<p>info#CreativeStudio.com</p>
</div>
<div id="top-bar-selection" >
<ul>
<li>HOME</li>
<li> ABOUT US </li>
<li> PORTFOLIO </li>
<li> SERVICES </li>
<li> BLOG </li>
<li> CONTACT US </li>
</ul>
</div>
</div>
<hr id="hr" />
<div id="banner">
<object id="flash1" data="Beginner.swf" type="application/x-shockwave-flash" style="width: 960px; height: 380px">
<param name="movie" value="Beginner.swf" />
</object>
</div>
<div id="hr2">
<hr />
</div>
<div id="information">
<div id="about-us-section">
<div id="about-us">
<h3>→ ABOUT US</h3>
</div>
<div id="hr">
<hr />
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero.</p>
<p style="height: 3px"></p>→<h4>Read</h4>
</div>
</div>
<div id="our-benefits-section">
<div id="our-benefits">
<h3>→ OUR BENEFITS</h3>
</div>
<div id="hr">
<hr />
</div>
<div id="content">
<p>☑Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. </p>
<p>☑ Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat</p>
<p>☑Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. </p>
</div>
</div>
<div id="testimonials-section">
<div id="testimonials">
<h3>→ TESTIMONIALS</h3>
</div>
<div id="hr">
<hr />
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero.</p>
<h5>Rafi, Graphicsfuel.com</h5></div>
</div>
</div>
<div id="hr">
<hr />
</div>
<div id="our-portfolio-section">
<div id="our-portfolio">
<h3>→ OUR PORTFOLIO</h3>
</div>
<img alt="PortfolioA" src="images/Portfolio A.jpg" id ="picA" />
<img alt="PortfolioB" src="images/Portfolio B.jpg" id ="picB"/>
<img alt="PortfolioC" src="images/Portfolio C.jpg" id ="picC"/>
<img alt="PortfolioD" src="images/Portfolio D.jpg" id ="picD"/>
</div>
<div id="hr">
<hr />
</div>
<div id="information2">
<div id="blog-updates-section">
<div id="blog-updates">
<h4>→ BLOG UPDATES</h4>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero.</p>
</div>
</div>
<div id="socialmedia">
<h6> → CONNECT WITH US</h6>
<img alt="" src="images/Icon/Twitter.png" />
<img alt="" src="images/Icon/Facebook.png" />
<img alt="" src="images/Icon/Flickr.png" />
<img alt="" src="images/Icon/RSS.png" />
</div>
</div>
<div id="footerbgcolor">
<div id="footer">
<div class="below-bar-selection">
<p>Home | About Us | Portfolio | Services | Blog | Contact Us</p>
<p>© 2010 CreativeStudio. All Rights Reserved</p>
</div>
<div class="logo-small" style="left: 770px; top: 1240px; width: 128px">
<img alt="" src="images/Icon/Logo%20Small.png" />
</div>
</div>
</div>
</body>
</html>
CSS CODES:
#top-most { background-color:black; height:17px; }
#wrapper { width :960px; height:130px ; margin:0px auto; background-color: #F4F4F4; overflow:hidden; }
#logo { margin: 19px 0 0 10px; float:left; }
#header { float: right; margin: 19px 3px 0 0; }
#header p { color: #979899; }
#top-bar-selection { width:960px;position :absolute ; overflow:hidden; display:inline-block; margin:70px auto 0 -160px; word-spacing:1px; letter-spacing:1px;}
#top-bar-selection ul{color:orange; text-align: right; }
#top-bar-selection ul li {display :inline; font-size:12px; font-family: arial black; margin: 0 32px 0 0;}
#top-bar-selection ul li a:link {color: #fe9a00; font-family: Arial black; }
#top-bar-selection ul li a:hover {color: #000000; font-family: Arial black; }
#hr { width: auto; margin: 0px auto; color:#C0C0C0; height: 12px; margin-bottom:15px; overflow:hidden;}
#hr2 { width:960px; margin: 0px auto ; margin-top:10px; height:9px;}
#banner { width:960px; height:380px ; margin:0px auto; background-color: black; }
#information { width:960px; margin :0px auto 0 auto; height:235px; padding-top : 15px; margin-top:13px; }
#about-us-section { width: 266px; margin-right: 600px; background-color: #F4F4F4; position:absolute; padding-right: 10px; }
#about-us-section hr { background-color:black; height:7px; width:260px; margin:10px 0 0 0; position:absolute; }
#about-us-section p { padding-top: 10px; font-weight:lighter;}
#about-us-section h4 { color:#FF9933; display:inline; line-height:30px;}
#about-us-section h4 a:link {color: #fe9a00; font-family: Arial black; }
#about-us-section h4 a:active {color: #fe9a00; font-family: Arial black;}
#about-us-section h4 a:visited {color: #fe9a00; font-family: Arial black;}
#about-us-section h4 a:hover { color:#000000; }
#our-benefits-section { width: 270px; margin: 0 0 0 355px; background-color : #F4F4F4; position:absolute; padding-right: 10px;}
#our-benefits-section hr { background-color:black; height:7px; width:260px; margin:10px 0 0 0; position:absolute; }
#our-benefits-section p { padding-top: 10px; }
#testimonials-section { width: 270px; margin: 0 0 0 700px; position:absolute; padding-right: 10px; }
#testimonials-section hr { background-color:black; height:7px; width:260px; margin:10px 0 0 0; position:absolute; }
#testimonials-section p { padding-top: 10px; font-weight:300; }
#testimonials-section h5 { padding-top: 10px; font-style:italic; }
#our-portfolio-section { width:960px; margin: 0px auto 0 auto; display: block; height:205px; }
#our-portfolio-section our-portfolio { margin: 5px 2px 0 0; }
#our-portfolio-section img { padding: 15px; display:inline;}
#information2 { width:960px; margin :0px auto 0 auto; height:145px; margin-top:5px; }
#blog-updates-section { width:600px; height:50px; position:absolute; }
#blog-updates-section h3 {margin: 8px 5px 0 0; line-height:10px;}
#blog-updates-section p {margin: 28px 5px 0 0; }
#blog-updates .content { margin: 28px 5px 0 0; float:left; position:absolute;}
#socialmedia { float:right; overflow:hidden; position:absolute;margin: 10px 720px; width: 150px; height: 125px; width:200px;}
#socialmedia h6 { font-size:10px;}
#socialmedia img { padding: 6px; margin-top:20px; }
#footerbgcolor { background-color:#E2E2E2; height:100px; }
#footer { width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#footer .below-bar-selection { margin: 30px 0 0 20px; float:left; width: 750px; }
#footer a:link {color: #000000; font-family: Arial black; }
#footer a:active {color: #000000; font-family: Arial black;}
#footer a:visited {color: #000000; font-family: Arial black;}
#footer h4 a:hover { color:#000000; font-family:Arial black;}
#footer .logo-small { float:right; padding-top: 15px;}
If you already got a better solution, then forget this message,
But i noticed something.
according to your code
#hr {
width: auto;
margin: 0px auto;
color:#C0C0C0;
height: 12px;
margin-bottom:15px;
overflow:hidden;}
Since your id of Wrapper is 960 pixels,
use that width template to set your HR' width value.
so change:
width: auto;
to
width: 958px;
Notice: 960px looks a bit too long, so i shaved some pixels out to fit the alignment. But if 960 looks better, then choose 960.
Well first of all i don't see any white space on right side of the page rather space between the hr tag due to the height you have given.
Secondly,
hr tag will automatically create a line. If you want to give it an id that means you want to add additional styling to the hr element.
If i am understanding properly, than you shouldn't even use WIDTH.
#hr{
// no need to use width as it will automatcally fill it self
margin: 0px auto;
color:#C0C0C0;
height: 12px; // only needed if you want to create space inbetween
margin-bottom:15px;
overflow:hidden;
}
and use it as
<hr id="hr" />
Hope this answers your question.
Since you only posted the CSS code without the HTML code, it may be hard for people to see the whole problem, but from the information you posted, this will be my proposed solution,
This css code:
width:960px;
makes your HR a fixed width of 960 pixels.
This css code:
width:70%;
makes your HR take up 70% of its container's width.
You could just try setting the width to 100%.
p.s. Why do you need it to be 70% ?
hr { //remove # so it will apply to <hr> tag
width:70%;
margin: 10px auto; // change the margin size so the hr line can be seen
color:#C0C0C0;
margin-bottom:15px;
overflow:hidden;
}
I think the problem that could remove the hr line is only about margin. If the margin is set to 0, then the hr line could be override by another tag
I know, this topic has been opened 1000 times, but I didn't find a suitable solution (or a solution I could understand).
I have a simple page (wordpress) with a fixed nav menu on the left, scrollable content in center and a fixed footer (always visible).
I have 2 problems I have tried to solve in every way:
1) the wrapper (100% height) wraps ok until you scroll the page, but does not extend after the scroll (see attached image, page is scrolled to bottom).
2) the content at the bottom is under the footer, I couldn't find a way to apply a -30 padding to make readable the final part of the content ( I think this relates to the problem no.1).
Here is the CSS (also used a reset.css based on YUI reset):
/* LAYOUT */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 }
/* GENERAL LAYOUT */
html, body{
margin : 0;
padding : 0;
height : 100%;
border : none;
}
#wrapper{
min-height: 100%;
width: 100%;
background: red;
overflow: hidden;
}
#container{
width: 960px;
margin-left: 40px;
padding-bottom: 30px
}
#navigation{
position: fixed;
overflow:hidden;
width: 200px;
}
#content{
position: absolute;
overflow: auto;
width: 420px;
margin-left: 220px;
}
li > a {
display: block;
}
a {outline: none;}
/* NAVIGATION */
h1.logo {
height: 155px;
}
#navigation ul{
margin:0;
padding:0;
text-align: right;
}
#navigation ul li{
height:28px;
display: inline-block;
color:#000;
padding: 0 0 0 0;
overflow:hidden;
line-height: 28px;
margin-bottom: 7px;
}
#navigation li a{
padding: 0 28px 0 0;
}
.nav-blog{
width:190px;
border-left-color: #d1bbe8;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-eventi{
width:190px;
border-left-color: #aa87a0;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-bio{
width:190px;
border-left-color: #e2b893;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-discography{
width:190px;
border-left-color: #365f68;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-photos{
width:190px;
border-left-color: #545768;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-videos{
width:190px;
border-left-color: #4b5668;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
.nav-contact{
width:190px;
border-left-color: #686055;
border-left-width: 10px;
border-left-style: solid;
background-color: #edece6;
}
/* ----------Active links----------- */
.home .nav-blog
{
width: 150px;
}
/* POST */
#ilpost{
width: 420px;
margin: 0 0 18px 0;
}
.spaziovuoto{
height: 155px;
}
.type-blog{
border-top-color: #d1bbe8;
border-top-style: solid;
border-top-width: 12px;
}
#tempo{
height: 32px;
background: url('../images/flatback.png');
}
.iltitolo{
background-color: #edece6;
}
.ilcontenuto{
background-color: #edece6;
}
/* PLAYER */
#player{
clear: both;
width: 100%;
position: fixed;
bottom: 0px;
height: 30px;
background: #000;
color:#fff;
}
And the HTML:
(head omitted)
<body class="home blog">
<div id="wrapper">
<div id="container">
<div id="navigation">
<h1 class="logo">Logo</h1>
<ul>
<li class="nav-blog "><a href="/">blog</li>
<li class="nav-eventi sel">eventi</li>
<li class="nav-bio sel">bio</li>
<li class="nav-discography sel">discography</li>
<li class="nav-photos sel">photos</li>
<li class="nav-videos sel">videos</li>
<li class="nav-contact sel">contact</li>
</ul>
</div><!-- .navigation -->
<script type="text/javascript">
jQuery(function($){
$.supersized({
//Background image
transition_speed : 50,
slides : [ { image : 'http://localhost/xxxxxxxx/wp-content/themes/xxxxxxxxxx/images/sfondotest1080.jpg' } ]
});
});
</script>
<div id="content">
<div class="spaziovuoto"></div>
<!-- LOOOOOOOOOOOP -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">test post 4</p>
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p>
<p> </p>
</div>
</div><!-- .ilpost -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">test post 3</p>
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p>
<p> </p>
</div>
</div><!-- .ilpost -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">test post 2</p>
<p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} --> <!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} -->Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue.</p>
<p> </p>
</div>
</div><!-- .ilpost -->
<div id="ilpost" class="type-blog">
<div id="tempo">
Uncategorized // 10 April, 2011</div><!-- .tempo -->
<div class="ilcontenuto">
<p class="iltitolo">Hello world!</p>
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</div>
</div><!-- .ilpost -->
</div><!-- .content -->
<ul class="xoxo">
</ul>
</div> <!-- container -->
</div> <!-- E wrapper-->
<div id="player">Player</div>
</body>
</html>
Just in case, I attached an image with an explanation.
Thanks for your help!
#navigation{
position: fixed;
overflow:hidden;
width: 200px;
left: 40px; /* add this */
}
#content{
/*position: absolute; remove this*/
overflow: auto;
width: 420px;
margin-left: 220px;
}
your page has no content.. well it thinks it doesn't ;)
so remove the absolute positioning from the content .. let the content remain in the flow this should mean that the existing min-height on the wrapper actually gets a chance to work (at the minute it thinks there's nothing in it so it can't grow)
that then appears to work but IE7 gets a bit pernickety, like it does and moves the nav over the content - so just explicitly (give a tsk and) tell it where you want it to be (help it count!) and add the left position on #navigation
Have you tried using min-height: 100% instead of height: 100% on your body and html styles?
As far as the wrapper, take off the 100% height. It will default to auto height and expand to the content.
For the content under the footer you just apply a bottom padding to the content, and take off the absolute positioning. Just put a left margin on it (and possibly a float).