i am i am new in CSS.. i have converted my psd file into html/css.. now i want to move my webpage page into center of the window.. i tried some code and that code align only text the background image "back.gif" remains at left.. here is my html and CSS code"
**HTML**
<body>
<div id="main">
<div id="header">
<div id="logo">
<img src="logo.gif" />
</div>
</div>
<div id="menu">
<img src="images/menu_07.gif" />
<div id="m">
<ul>
<li> Home</li>
<li> Pages</li>
<li> Donor</li>
<li>Seeker</li>
<li>Hospitals</li>
<li>Life Saving Contacts</li>
<li>Feedback</li>
</ul>
</div>
</div>
<div id="content">
<div id="center" align="center">
<h3>WELCOME TO ADMIN AREA</h3>
<p id="ajk">AJKBLOODBANK.COM</p>
<?php
echo "welcome!".$_SESSION['username'];
echo "<br>";
echo "<a href=logout.php>Logout</a> ";
?>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
**CSS**
body
{
background:url(../back.gif) repeat-y;
padding-left:105px;
height:900px;
text-align: center;
margin:auto;
min-width: 760px;
}
div#main
{
width: 720px;
margin: 0 auto;
text-align: left;
}
#header
{
width:787px;
margin-top:10px;
}
#menu
{
width:787px;
float:left;
margin-top:20px;
}
#content
{
background-color:#FFF;
border:groove;
width:790px;
float:left;
padding-top:30px;
margin-top:30px;
}
#footer
{
float:left;
height:52px;
width:790px;
}
Please tell me where i made mistake ..
the diameseion of background image "backgif" = 995x1000
Whichever element you want centered - set an explicit width and then set left/right margins to auto
#main { width:995px; margin:0 auto; }
...this will center the element in its parent. If you were to center #main, it would be centered on the page (assuming your body has 100% width)
EDIT
Try making your background image apply to #main instead of body. Or, center the background image using background-position, or shorthand:
body { background:url(../back.gif) repeat-y center top; }
Cheers
To center the body element, I would use something similar to this:
.body {
width: 940px;
margin-left: auto;
margin-right: auto;
}
Related
I am trying to design a simple ecommerce website, in that my footer tag text is displayed right beside the section tag. I have no idea where I am doing wrong.
HTML
<aside id="categories">
<header id="headings" class="background_div">Categories</header>
<nav>
<ul>
<li>Staples</li>
<li>Oils</li>
<li>Vegetables</li>
<li>Fruits</li>
</ul>
</nav>
</aside>
<div id="bestsellers">
<header id="headings" class="background_div">Bestsellers</header>
<article class="productarticle">
<figure>
<img src="faded-short-sleeve-tshirts.jpg" alt="cabbage"/>
</figure>
<div class="align_text">
<header id="headings">
<span class="productarticlename">Cabbage 1</span>
</header>
<p class="productprice">$10</p>
<div class="addtocart">
Add to Cart
</div>
</div>
</article>
<!-- 4 More Article Tags will be included here -->
</div>
</section>
<footer>
<div clas="heading">This is footer text</div>
</footer>
CSS
#content{
width: 100% px;
display: block;
}
.carousel_img{
width: 1000px;
}
#headings{
font-weight: bold;
}
#categories{
float: left;
}
#bestsellers{
float: left;
margin-left: 25px;
margin-right: 0 px;
width: 80%;
height: 100%;
margin-bottom: 20 px;
}
.background_div{
background: lightgreen;
}
.productarticle{
float: left;
}
.align_text{
text-align: center;
}
Please help me. I want the content in section tag and the text in footer tag to be displayed in seperate lines.
JS-FIDDLE DEMO
See this fiddle
Since your #content contains of floated elements, you also need to float the #content div. Thus add a float:left; to #content.
Now to clear this float effect from the footer, you need to add clear:both; to your footer CSS. Thus the changed CSS would be like
#content{
width: 100% px;
display: block;
float:left;
}
footer{
clear:both;
}
I have a div sitting inside of another div, and the background color of the inner div will not stretch for the full length specified by div's width property in css. I have tried using min-width:960px, width:100%, and width:960px, but the background continues to constrain to the contents of the div.
Here is the css
#wrapper-content {
width:960px;
margin: 0 auto;
font-family:arial;
}
#header {
width: 960px;
height: 150px;
background: cyan;
}
#image-logo {
height:49px;
width:374px;
}
#menu-main {
width:960px;
background:blue;
}
#menu-main li {
display:inline;
}
.menu-main-item {
width:6em;
text-decoration:none;
float:left;
color:white;
background-color:blue;
padding:0.8em 0.6em 0.8em 2.4em;
}
Here is the HTML
<div id="wrapper-content"> <!--Beginning of Content Wrapper-->
<div id="header">
<img id="image-logo" src="" alt="Image Logo">
<span style="float:right; font-size:37px;">(888) 555-5555</span><br>
<span style="float:right; font-size:16px">123 Anywhere Ave</span><br>
<span style="float:right; font-size:16px">Somewhere, NY 10001</span>
</div>
<div id="menu-main">
<ul style="margin:0; padding:0;">
<li><a class="menu-main-item" href="index">Home</a></li>
<li><a class="menu-main-item" href="services">Services</a></li>
<li><a class="menu-main-item" href="library">Library</a></li>
<li><a class="menu-main-item" href="about">About</a></li>
<li><a class="menu-main-item" href="contact">Contact</a></li>
</ul>
</div>
</div> <!--End of Wrapper-->
I've also created a JSFiddle for example: http://jsfiddle.net/P88e2/1/
The div with an ID of #menu-main has a dark blue background which does not stretch all the way. Any help stretching the background color the full width of the div is appreciated....
Try doing this change in your CSS:
#menu-main li {
display: inline-block;
}
I have a three div block inside main div which is head,content and footer.
I have facing few problems which are:
(1) images not fiting inside div
means i am try to find code for this situation:
<div style="height:10%">
<img src="abc.jpg" height="100%">
</div>
and
(2) I have a div which height is 80%,in this div i put three div their height is 20%, 60%, 20%.the div whose height is 60% has no data i write it for margin.(means first div 20% height has a data then 60% height for space then another div who has a data), so how to achive it?
(if possible please suggest without using margin-up or bottom
HTML code:
<div class="homebackground" style="height:100%; width:100%; background-image:url(../../stylesheets/images/Logo_with_Blu_bg.png); background-size:98% 88%">
<div class="bodyhead">
<img src="../../stylesheets/images/user_male.png"/>
</div>
<div style="height:80%">
<div style="width:100%">
<div class="mainbodyup" align="right">
<img src="../../stylesheets/images/phone.png"/>
</div>
<div class="mainbodyup"> </div>
<div class="mainbodyup">
<img src="../../stylesheets/images/groupchat.png"/>
</div>
</div>
<div style="height:60%; clear:both;" class="a">
<div class="mainbodymid"></div>
<div class="mainbodymid"></div>
<div class="mainbodymid"></div>
</div>
<div style="width:100%">
<div class="mainbodybot" align="right">
<img src="../../stylesheets/images/recent.png"/>
</div>
<div class="mainbodybot"> </div>
<div class="mainbodybot">
<img src="../../stylesheets/images/search.png"/>
</div>
</div>
</div>
<div style="height:10%;">
</div>
</div>
CSS:
.bodyhead
{
height:10%;
}
.bodyhead img
{
width: 10%;
}
.mainbodyup
{
height:20%;
width:33%;
float:left;
}
.mainbodyup img
{
width: 20%;
}
.mainbodymid
{
width:33%; float:left; padding:0px;
}
.mainbodybot
{
height:20%;
width:33%;
float:left;
}
.mainbodybot img
{
width: 20%;
}
.a:before
{
display: table;
content: " ";
}
.a:after
{
clear:both;
display: table;
content: " ";
}
If you want to fit the entire image in the div . try using
style="background:url('image-url') no-repeat; background-size: 100%;"
for the div which contains the Image . Rather using the image object .
style="background:url('image-url') no-repeat; background-size: contain;"
Use this code.
add one css to your existing stysheet
html, body{
height: 100%;
}
I have two css classes. One is supposed to hold images of text on the left side of the page and the other is supposed to hold a form on the right side of the page. For some reason, when I increase the padding to try to lower the text images on the left side of the page, the form on the right side also goes down. How can I fix it so that I can adjust the padding on both the classes independantly. Here is the css:
.header { background:url(images/slider_bgpng200.png) top repeat-x; padding:0; margin:0 auto; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.formbox{float: right;}
.logo { float:left; padding:0; margin:0; width:242px;}
.slider { background: transparent; margin:0 auto; padding:0; height:383px;}
.slider .gallery { margin:0 auto; width:980px; height:383px; padding:0;}
.slider .textholder {padding-top: 100px;}
And here is how it appears in the html:
<div class="header">
<div class="headertop">
<div class="header_text">Email | Client Login </div>
</div>
<div class="block_header">
<div class="logo"><img src="logo.png" width="242" height="94" border="0" alt="logo" />
</div>
<div class="slider">
<div class="gallery">
<div class="textholder"> <img src="images/textimg.png"></div>
<div class="formbox">Form is here </div>
</div>
</div>
</div>
</div>
Thanks. The website is up at avidest.com/schneer.
Add a float:left to the textholder.
.slider .textholder {float:left;padding-top: 100px;}
I also recommend using a inspecting tool to see what is actually happening. In this case you would have noticed that the textholder is a block-element that uses the full width of the container.
It should be very simple, but I am, so it's not ...
The first thing on the page, right after <body>, I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page.
Can you do that without knowing the width og the image?
Yes, put image in one div, and text in another, define "float: right" property for the div with the image, and "float: left" for div with the text in CSS
<div class="div1"><img src=...></div>
<div class="div2">text</div>
<style type="text/css">
.div1 {
float: right;
}
.div2 {
float: left;
}
</style>
<div id="banner">
<div style="float: left; width: 50%;">
left - just put your text here
</div>
<div style="float: right; width: 50%;">
right - just put your image here
</div>
</div>
You may also want to use a clearfix (google it) technique to ensure the banner div always has height no matter how big the image is.
Here's a fiddle : http://jsfiddle.net/KaHjd/1/
I've assumed that you want the image right aligned as well.
#header {
overflow:auto;
}
#branding {
float: left;
padding: 10px;
background: #00AA00;
}
#logo {
float:right;
padding: 10px;
background: #aa0000;
overflow:auto;
}
#logo img {
float:right;
}
<div id='header'>
<div id='branding'>
some text
</div>
<div id='logo'>
<img src='http://placekitten.com/200/100'>
</div>
</div>
Of course we can. But your image must be small enough in order for your text not to overflow the banner.
HTML
<div class="banner">
<span>Text goes here</span>
<img src="" alt="" />
</div>
CSS
.banner { overflow: hidden; width: 100%; }
.banner span { float: left; }
.banner img { float: right; }