I have a small problem with overlapping columns. Basically I have 3 columns and the content in the middle column is overlap by the right column. I'm a css amatuer so I haven't been able to make the right column expand when the content in the middle column is bigger than usual. If I try to make the middle column wider then the right columns drops down and everything goes out of alignment.
This is the css code:
#content {
width:960px;
margin:0 auto 20px;
overflow:visible
}
.c_middle {
width:960px;
background: transparent url(../images/content_middle.gif) repeat-y top center;
}
.c_left { background: transparent url(../images/content_left.gif) repeat-y top center;}
.c_right {background: transparent url(../images/content_right.gif) repeat-y top center;}
.c_full {background: none;}
#leftcolumn, #rightcolumn {
float: left;
width: 210px;
margin: 0 10px 0 0;
}
#rightcolumn {
margin: 0 0 0 10px;
}
div#maincolumn {
float: left;
width: 500px;
padding:0 10px;
}
div#maincolumn_full {
float: left;
width: 960px;
padding:0 0 10px;
}
div#maincolumn_left {
float: left;
width: 720px;
padding:0 10px 10px;
}
div#maincolumn_right {
float: left;
width: 720px;
padding:0 10px 10px;
}
Thanks in advance.
It appears you're building a 960px project - why not use the 960 Grid System instead of reinventing the wheel? It would be a quick and painless way of eliminating any issues you're presently having with these columns.
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
<div class="container_12">
<div class="grid_3 alpha">
<p>Left Column</p>
</div>
<div class="grid_6">
<p>Center Column</p>
</div>
<div class="grid_3 omega">
<p>Right Column</p>
</div>
<div class="clear"></div>
</div>
Sort of hard to tell without your markup, but it seems that in some cases your width + margin + padding would exceed 960px horizontally. But again, without knowing how you have your markup nested, it's hard to tell.
And I agree with Jonathan Sampson -- no sense in reinventing the 960 grid system. If you get this to work, you'll inevitably still run into weird issues in some browsers if that's a concern to you. Why not just leverage other peoples' efforts who've already worked through all that.
Related
I am trying to arrange these photos (the ones you see in (http://www.barcaffecitta.it/chi-siamo/) in a row rather than a column. Could someone please explain how this could be done? Also when creating the div for the images, can I just create one div or should I make a div per image?
Also, if you could possibly explain briefly how rows and columns of text or other objects, not only images, can be created with html and css that would be great
To answer your main question, to get the images to tile horizontally you need to do three things.
Set the images to float so they can appear side by side:
Make sure your container div is wide enough for the images to fit side by side.
Remove the extraneous <br> tags after each image.
Your CSS should look like this, more or less.
.alignnone {
float: left;
margin: 5px 20px 20px 0;
}
#head-shots {
float: left;
width: 100%;
}
for example your image name is image.jpg and it has 100px height and 100px width:
in tag <head> put this:
<style>
.div_row
{
width: 100px;
min-height: 100px;
}
.img_column
{
width: 100px;
height: 100px;
background: url('image.jpg') no-repeat;
float: right;
}
</style>
and in your <body> tag put this:
<div class="div_row">
<div class="img_column"></div>
<div class="img_column"></div>
<div class="img_column"></div>
<div class="img_column"></div>
<div class="img_column"></div>
<div class="img_column"></div>
</div>
you can repeat <div class="img_column"></div> as you like.
but i think here is the better suggestion for you!
<style>
.div_row
{
width: 100px;
min-height: 100px;
}
.img_column
{
width: 100px;
height: 1000px;
background: url('image.jpg') repeat-y;
float: right;
}
</style>
<div class="div_row">
<div class="img_column"></div>
</div>
this repeats your image for 10! (1000 height / 10 images = 10 slides!)
Here is a link of what I currently have for my skeleton design.
I'm new to using divs, I always used table but moving towards divs.
But anyways, my question would be...How do I align my content of each div properly.
I want the navigation to be centered along with the main content.
Index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Chomas Tool</title>
<meta charset="windows-1252">
<meta name="Keywords" content="chomas,tool,pinconning,michigan,machine,shop" />
<meta name="Description" content="Chomas Tools- description" />
<!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="images/logo.gif" width="270" height="100" alt="Chomas Tool"></div>
</div><!-- Close header-->
<div id="navbox">Home | About | Projects | Contact</div>
<div id="content">TEST</div>
<div id="footer">Copyright © Chomas Tool</div>
</div><!--Close_wrapper-->
</body>
Main.css
body {
background-color:#b0c4de;
}
p {
background-color:#e0ffff;
}
#wrapper {
height: 100%;
width: 900px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
background-color:grey;
height: 100px;
width: 100%;
}
#logo {
height: 400px;
width: 300px;
float: left;
}
#search {
width: 350px;
height: 400px;
float: right;
}
#search table {
border: 0px solid #000;
padding: 0px;
}
#navbox {
background-color:darkgrey;
width: 100%;
height: 20px;
text-align:center
}
#content {
background-color:lightgrey;
width: 100%;
height: 150px;
}
#footer {
background-color:grey;
width: 100%;
height: 20px;
}
The reason you are getting strange results with that layout is that your #logo div is set to a height of 400px. That is pushing everything else over to the right.
If you remove the height: 400px on the #logo div, and then add this to your styles:
img {vertical-align: bottom;}
everything will appear as you'd expect.
There are a few issues with your code.
The reason your Nav div, Content div and Footer divs are aligning improperly is because you have your #logo div set to a 400px height and floated, but you aren't clearing your float. Unfortunately you can't properly clear that div because you have a height on header of 100px, which is less than your 400px div that is nested inside the header.
For the purpose of teaching you, I'll assume your logo should NOT be 400px high, so I'll set it to be equal to the header height of 100px.
#logo {
height: 100px;
width: 300px;
float: left;
}
While we are on the concept of height, it's acceptable to have a fixed height on your header, as it's a div that shouldn't be super tall or allowed to change (generally speaking there are exceptions). That said... Your content div really shouldn't have a height, I can see you did it here to simulate that you had more content, instead let's just add some content there.
So now we are here: http://jsfiddle.net/dkCZ6/
As you can see the navigation is centered nicely, your content is where it should be as well as the footer.
Let's center the footer to make it nice looking... I added text-align: center;
http://jsfiddle.net/dkCZ6/1/
#footer {
background-color:grey;
width: 100%;
height: 20px;
text-align: center;
}
Noticed that white space that was created between the nav and content area? That's from adding the paragraph around the content stuff. Let's reset all padding and margin by adding * { margin: 0; padding: 0; } to the top of our CSS. (you should use a proper Reset CSS Stylesheet or use a Normalize CSS Sheet. These reset stylesheets help standardize elements across the different browsers, and also gives you a blank slate from which to develope from, without having to worry about weird things occuring, like that white space that we fixed.
Here is the best answer I have:
text-align: center
But base on that code you have then I have done:
**margin: 0 auto**
http://jsfiddle.net/Riskbreaker/WASEH/5/
Just to chow you I did this only on the nav:
Added:
<div class="inner">Home | About | Projects | Contact</div>
and on CSS:
.inner {margin: 0 auto; width: 50%;}
Classes are always good to use when you want to do multiple calls of the same to minimize code. Get in the habit of doing classes.
Lastly I suggest learning HTML5...Divs are great but you can simplified your code with html5
..
..Its simple to learn :)
Add
<div style="clear:both;"></div>
after you close the header
Your image style is all wrong hence why everything will look in the wrong position.
You should also be aware that you can use
margin: 0 auto;
Rather than
margin-right: auto;
margin-left: auto;
Consider using list elements for your navigation rather than just static text.
Here's my situation: I have a changing image of various sizes (always different) being brought into an area of our splash. I posted a question about this a few days ago and employed the solutions that someone suggested. However, there were other issues that I also had to deal with I am back with an updated page that fixes other problems but I now need to see how to vertically center an image within this new code
First, here's the page: http://americanart.si.edu/index_newsplash3m.cfm
It's the middle image for our blog under the slider. Here's the code and css:
Code:
<div class="middle">
<div class="middleimage">
<img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image" /><br />
</div>
<div id="middletext">
<p>
<i>The Dying Tecumseh</i> by Ferdinand Pettrich has returned to the second floor galleries at American Art after his extended stay with the National Portrait Gallery for the exhibition, <i>1812: A Nation Emerges</i>. Visit his new spot among the ...
</i>
<span class="red">Read more...</span> </p>
</div>
</div>
And here is the CSS:
.middle {
float: left;
width: 30.5%;
margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
background: url(/#res/img/americanart_blog_test.jpg) no-repeat #fff;
padding-top: 31px;
text-align: center;
position: relative;
}
div.middleimage { height: 207px;
}
div#middletext {margin-right: 2.1%;
margin-bottom: 2% ;
background-color: #fff;
min-height: 100%;
}
div.middle img#middleimg { max-height: 207px;
max-width: 291px;
bottom:0;
left:0;
right:0;
margin:auto;
vertical-align: middle;
position: relative;
}
I had to create some new nested divs around the image and text in order to keep the text from going into the image area when the image was of small height.
Thanks.
For div.middleimage add this css rule:
display:table;
Then wrap a div around your actual img tag like this:
<div id="imagewrap"><img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image"></div>
And add this rule to your css:
#imagewrap {
display:table-cell;
vertical-align:middle;
}
You can also do this without any tables, simply add line-height: 207px; to your middleimage class and that should center the image inside.
div.middleimage {
line-height: 207px;
}
Centering things vertically in CSS is next to impossible, as far as I know. There's an article I've been meaning to read that may help you: http://designshack.net/articles/css/how-to-center-anything-with-css/
I am having difficulty getting 3 images of equal size to float properly. I have set the right and left margins on the center floated image to auto and it still doesn't work. All the panels in my layout are floated left which I revised from tutorials and works ok as they're butted up against each other, but trying to float images when there is more space than necessary, doesn't display as I want: with equal spacing between images Left & Center and Center & Right. My content panel is 534px wide with 10px padding taking up 554px plus a 1px border plus a 5px margin around the outside. The images are all 160px wide and I gave the FloatLeft class a 10px right margin, the FloatRight class a 10px left margin and the FloatCenter an auto margin for both left and right. Both FloatLeft and FloatRight are used on several pages, surrounded by text, which is fine.
Ok, update - I now realise float: center is not possible, DUH!, which is the problem - I'm just a few months into CSS etc.!
Are there any alternatives (other than a table). I could align them all left and make the margin: right attribute 27px (160px x 3 images + 27 + 27 = 534px) but then I'd need to create a new FloatLeft class specifically for these images. Any suggestions on the best method of aligning the images would be much appreciated.
Gary.
The relevant HTML & CSS:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solar Power Today</title>
<link rel="stylesheet" type="text/css" href="solarpower.css">
</head>
<body>
<div id="wrapper">
...........
<!-- header panel, then horizontal navigation panel then left panel then ... -->
..........
<div id="content">
<!-- main content -->
<h1 id="contentheader">Introduction to Solar Power</h1>
<p>
<img class="FloatLeft" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining
on roof solar panels" width="160" height="160">
<img class="FloatCenter" src="images/smallwindturbine160px.jpg" alt="Small wind
turbine spinning" width="160" height="160">
<img class="FloatRight" src="images/waveturbine160px.jpg" alt="Wave turbines in
motion" width="160" height="160">
</p>
CSS:
* {padding:0; margin:0; border:0;}
.FloatLeft {
float: left;
margin: 0 10px 10px 0;
}
.FloatRight {
float: right;
margin: 0 0 10px 10px;
}
.FloatCenter {
float: center;
margin: 0 auto 10px auto;
}
#content {
width: 534px;
min-height: 400px;
margin: 0px 5px 5px 0px;
padding: 10px;
float: left;
border: 1px solid black;
display: inline;
}
I recently tackled the issue of equally spacing and arbitrary number of elements across an unknown width using text-align: justify;. The full discussion can be found at “text-align: justify;” inline-block elements properly?, with good discussion on the pros/cons and alternate solutions.
Here's a fiddle showing how to arrange three images using the technique discussed. It should work in all major browsers, although feel free to kick the tires and get back to me with issues.
You are using float:center; in .FloatCenter class, that is invalid, there is no center value for float, put float:none; and chnage your margin length;
.FloatCenter {
float: none;
margin: 0 auto 10px 15px;
}
I am trying, as far as possible to keep things simple. I would prefer to know how the code I'm applying works rather than using a solution without fully understanding it. I wasn't aware that text-align could help to align images so I had a play around with that. Until I fully understand the above text-align: justify solution which has lost me a bit, I have put the each of the 3 images in a new div container class .ImageBox:
.ImageBox {
width: 178px;
margin-bottom: 10px;
float: left;
}
I then put each image inside a element and used an inline style on the element to align the image position:
<div class="ImageBox">
<p style="text-align: left"><img src="images/sunonsolarpanelroof160px.jpg" alt="Sun
shining on roof solar panels" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: center"><img src="images/smallwindturbine160px.jpg" alt="Small
wind turbine spinning" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: right"><img src="images/waveturbine160px.jpg" alt="Wave turbines
in motion" width="160" height="160"></p>
</div>
I know inline styles are frowned upon but it uses less code than creating a separate div container for each image and setting the text-align property in each div container to either left, center or right in the stylesheet. I've also just realised that simply specifying width and or height properties and even a border (for testing purposes) will not show a div container in the browser. The div container class appears to need either a float or clear property for the box to come to life. I need to learn more css.
Here's one way you can achieve what you're looking for:
http://jsfiddle.net/CsjYN/1/
THE HTML:
<div id="content">
<h1 id="contentheader">Introduction to Solar Power</h1>
<div class="images">
<img class="img-left" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining on roof solar panels" />
<img class="img-center" src="images/smallwindturbine160px.jpg" alt="Small wind turbine spinning" />
<img class="img-right" src="images/waveturbine160px.jpg" alt="Wave turbines in motion" />
</div>
</div>
THE CSS:
#content {
width: 534px; /* full width 556px */
padding: 10px;
border: 1px solid #000;
}
#content h1 {
margin-bottom:20px;
}
#content .images {
overflow:auto;
}
#content .images img {
width:160px;
height:60px;
float:left;
}
#content .images img.img-left,
#content .images img.img-center {
margin-right:27px;
}
I have a container on my test site:
#container {
margin: 0 auto;
}
Then I added the left vertical menu and on some small screens that menu is not fully visible.
Like my old laptop :-)
I want to keep the margin:auto setting in place but I want to move the whole #container a little bit to the right.
Could it be done some how?
I have tried #container {margin-left:10px;}, but to no avail.
Playing with firebug, it's good to use:
#container {
margin: 0 auto;
position:relative;
left:10px;
}
Hope it solves...
The simplest approach would be to introduce another element (or style another element if it's already available). Thus, you might have:
<div style="margin-left: 10px;">
<div id="container" style="margin: auto;">...</div>
</div>
That way the centering is being done within a container div that's already got the appropriate left-hand padding.
If you wrap your #container div in another div with double the left margin, that will work.
#wrap {
margin-left: 20px;
}
.centre { /* this would be your #container */
width: 100px;
height: 40px;
margin: auto;
background-color: #f00;
}
#wrap .centre {
background-color: #00f;
}
The HTML:
<div class="centre"></div>
<div id="wrap">
<div class="centre"></div>
</div>
http://jsbin.com/emogu3