I want to do the following:
The biggest Box is a div containing two imgs separated by a small space and with two small block of texts exactly beneath each one.
The problem is that I have been trying (not kidding) for at least 5 hours.
Here is my code:
CSS:
#divPictures {
width: 960px;
position: relative;
float: left;
top: 520px;
left: 200px;
background: url("../imgs/bg-body.jpg");
margin: 0 0 0 -5px;
}
#divPictures img {
margin: 0 0 0 10px;
}
HTML:
<div id="divPictures">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE</p>
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
EDIT:
I can't post images but is a block containing two images one next to the other and text beneath.
Something like this? Quick example, you can obviously add in extra CSS, or float both left and pad/margin etc...
#divPictures{
width: 100%;
background: url("../imgs/bg-body.jpg");
}
.left{
width: 45%;
float:left;
}
.right{
width: 45%;
float:right;
}
.left img, .right img{
margin: 0 0 0 10px;
}
HTML:
<div id="divPictures">
<div class="left">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE</p>
</div>
<div class="right">
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
</div>
Make new divs for images and use css atribute display: inline-block to tell interpreter that you want your divs in a line.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
div#pic
{
display: inline-block;
width: 200px;
background: url("../imgs/bg-body.jpg");
margin: 5px 0 0 -5px;
}
div#pic img
{
margin: 0 0 0 10px;
}
</style>
</head>
<!-- HTML -->
<body>
<div id="divPictures">
<div id="pic">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT HERE"</p>
</div>
<div id="pic">
<img src="imgs/what-we-do.jpg" alt="">
<p>"AND HERE"</p>
</div>
</div>
</body>
</html>
This is the simplest way... When i get stuck I delete it and start over. I think you would have benefitted from starting over...
CSS
<style>
.caption{
text-align: center;
}
li{
background: #ccd2cd;
float: left;
margin:5px;
list-style: none;
padding:5px;
}
</style>
HTML
<ul>
<li>
<img src="http://omarhabash.com/img/feature1.jpg" alt="">
<div class="caption">caption2</div>
</li>
<li>
<img src="http://omarhabash.com/img/feature1.jpg" alt="">
<div class="caption">caption2</div>
</li>
</ul>
if you dont want to use (li) list then just replace those with div classes and rename the style also to the same.
the way i have it here is a good start to a grid if thats what you are aiming for.
http://jsfiddle.net/Mz6aF/
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 am doing a practice because I recently started programming and I have come to areal block in my road, I am not kidding when I said I have been stuck in this part since morning, first with some troublesome images and now this.
Basically I need to move a div that has imgs and some text up so it stays just beneath the "Logo" but it won't budge! I tried to a lot of this but alas to no avail, I even checked it out on firebug and it appears as if the div containing the logo extends beyond what it should but I am positive I didn't mess it up like that.
Also I cannot use ,styles in html or % for this.
<div id="header">
<img src="imgs/logo.png" id="logo" />
<img id="donate" />
<div id="divMenu">
<ul id="menu">
<li>Home</li>
<li> About </li>
<li> Our Programs </li>
<li> Gallery </li>
<li> Contact </li>
<li> Blog </li>
</ul>
</div>
</div>
<div id="bodyLogo">
<img src="imgs/bg-featured.jpg"alt="" />
</div>
<div id="slogan">
<p>As The Saying Goes.. </p>
<p>You Don’t Know What You’ve Got </p>
<p> ‘Till It’s Gone.</p>
<h2>Plant A Tree.</h2>
<h2> Grow A Tree.</h2>
<h2><span id="tituloSpan">Save The Future.</span></h2>
</div>
Here is where it makes a invisible jump I cannot bridge!
<div id="divPictures" class="opacity">
<div class="left">
<img src="imgs/help-out.jpg" alt="">
<p>"TEXT"</p>
<div id="flecha">
<img src="">
</div>
</div>
<div class="right" >
<img src="imgs/what-we-do.jpg" alt="">
<p>"TEXT."</p>
<div id="flecha">
<img src="">
</div>
</div>
</div>
And the CSS:
body{
width: 956px;
font-family: 'Rokkitt', serif;
background: url("../imgs/bg-header.jpg");
background-repeat:repeat-x;
text-decoration: none;
margin: 0 auto;
}
#bodyLogo{
height: 396px;
position: relative;
margin: 18px 0 0 0;
}
#divPictures{
position: absolute;
width: 956px;
background: url("../imgs/bg-body.jpg");
margin: 0 0 700px 0 ;
vertical-align: top;
}
.left{
width: 478px;
float:left;
font-family: 'Quattrocento Sans', sans-serif;
}
.right{
width: 478px;
float:right;
font-family: 'Quattrocento Sans', sans-serif;
}
.left img, .right img{
margin: 0 0 0 10px;
}
#flecha{
background: url("../imgs/arrow-gray.png");
background-repeat: repeat-x;
width: 460px;
}
Thanks A LOT in advance.
Best Wishes.
You have a fixed height on your #bodyLogo which would make it extend past it's size. I don't know how large you have your images, but everything should snap right below it if you remove that height.
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}
Ok I have edited this question as the issue has changed slightly. Basically margin: 0 auto; is not working for me on 2 elements. They just will not centre in the middle of the page. I guess this jsfiddle shows a good example http://jsfiddle.net/Hr4uK/1/ Imagine the red box across the top is centred, every other div floats slightly to the right.
CSS:
#sliderFrame {margin: 0 auto; width:990px;} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/
.two-step {
width:990px;
background-color: #CADDC0;
margin: 0 auto;
border-bottom:5px solid #CADDC0;
}
.var {
width: 990px;
}
.topimage {
margin: 0 auto;
width:990px;
}
HTML:
<div id="topimage">
<img src="http://www.paycoservices.co.uk/images/test1.jpg" />
</div>
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<a href="http://www.menucool.com/jquery-slider" target="_blank">
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-1.jpg" alt="Welcome to Menucool.com" />
</a>
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-2.jpg" alt="" />
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-5.jpg" width="968" />
</div>
<div id="htmlcaption" style="display: none;">
<em>HTML</em> caption. Link to Google.
</div>
</div>
<div class="two-step">
<img src="http://www.paycoservices.co.uk/images/2-step-sfinder.png" width="968" height="100" class="show_hide" alt="3 steps" />
</div>
You need to set width on the img element.
Without doing this, the img will take up it's natural width. (That's why it was jutting out beforehand)
FIDDLE
#sliderFrame, .two-step, img
{
margin: 0 auto;
width:968px;
}
I am not sure what you want. So I assume you want the div.two-step be aligned with the other divs.
you have a class in your CSS .slidingDiv but it is not used in your HTML...
#sliderFrame {margin: 0 auto; width: 990px}
.two-step {
width: 968px;
margin: 0 auto;
}
I also forced the width of the 990px wide image to be 968...
does what I think you want.
look at the fiddle
http://jsfiddle.net/Hr4uK/
This was resolved by hacking with the top menu as it was that that was slightly not centred.
Currently having issues trying to get these bordered text boxed to stay aligned with the above images in a way that when I re-size the page they stick with their prospective images. Currently I have them forced to stick under the images with margin css but once I re-size the boxes, the boxes all flee under the images.
EDIT: Updated code - still having similar issues but this looks more promising - attaching photo of current state.
<body>
<div id="container">
<div id="header">
<img class="leaf" src="images/freshleaf.png" height="150px" alt="freshtext"/>
<!--<button class="navbutton"> <strong> TEST </strong> </button>-->
</div>
<div id="body">
<div id="main" class="">
<div class="column">
<img class="smart" src="images/phone1.png" height="500px" alt="phone1"/>
<div class="box1"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
<div class="column">
<img class="smart" src="images/phone2.png" height="500px" alt="phone2"/>
<div class="box2"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
<div class="column">
<img class="smart" src="images/phone3.png" height="500px" alt="phone3"/>
<div class="box3"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
</div>
</div>
</div>
#body{
text-align: center;
}
#header {
padding-bottom: 50px;
text-align: center;
}
#main{
margin: 0 auto;
text-align:left;
width: 770px;
}
.column{
float:left;
padding-left: 10px;
}
.column:first-child {
padding-left: 0px;
}
.box1{
border: dotted;
border-color: gray;
padding: 2px 5px 2px 5px;
max-width: 250px;
text-align: center;
}
img.smart{
margin-left: auto;
margin-right: auto;
}
wrap each image and the coresponding text in one container and set float:left in the css. get rid of the #textboxes div. then center your #main div by setting it to the width of all the images (plus padding - if desired).
see example fiddle with all the code:
http://jsfiddle.net/QLvt7/4/