I'm trying to build a page which will have a box-like layout..A top banner a bottom banner,two navigation panels(left and right) and some text that will appear in the middle.
Now I'm wondering if you can create something like that without using a table and without predefined/hardcoded values for margins.
Is that possible?
Thanks in advance
Mike
You can achieve centrally elastic three column layout with header and footer like this if that is what you mean?
With html:
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
<div id="bottom"></div>
And css:
#top,#bottom{
width:100%;
height:70px;
background:silver;
clear:both;
}
#middle{
background:green;
}
#middle,#left,#right{
height: 200px;
}
#left,#right{
width: 200px;
background:skyblue;
}
#left{
float:left;
}
#right{
float:right;
}
Fiddle: http://jsfiddle.net/hkrVz/
You can build any table-like structure using divs and display:table,display:table-row,display:table-cell and you won't be abusing table semantics in markup. It really depends if you need to support IE7 as I think these CSS properties were only introduced to IE8 (years after everyone else had them).
If that's going to be a problem then just look around for options with flexibility to do what you need. I can't really think why hardcoded margins would even be an issue so perhaps you need to explain what you are attempting in more detail.
Related
New member approaching.
I'm new at HTML and CSS. I'm a designer and i got amazed by HTML and CSS, i'm studying methods of position elements inside a div. And recently I came across some problems. I was trying to make the elements fit the spaces above, but it seems like there's a line dividing the two parts of the blocks. Here's an image to illustrate what I'm experiencing.
Problem
My markup is:
<section style="max-width:470px; background-color:green;">
<div class="bloco1">
hello
</div>
<div class="bloco2">
hi
</div>
<div class="bloco3">
hey
</div>
<div class="bloco3">
I want this elements to fit those spaces above
</div>
<div class="bloco1">
I want this elements to fit those spaces above
</div>
<div class="bloco2">
I want this elements to fit those spaces above
</div>
And CSS is:
.block1 {
display:inline-block;
width:150px;
height:200px;
background-color:gray;
}
.block2 {
display:inline-block;
width:150px;
height:100px;
background-color:yellow;
}
.block3 {
display:inline-block;
width:150px;
height:180px;
background-color:blue;
}
So, I've tried to mess with position but it didn't served well. What should i do?
What I am trying to do is create 2 or more text boxes, side by side rather than stacked vertically.
I have tried using floats, which is fine for 2 boxes side by side, but isn't good for 3. Also, floats make the page look messy on mobile.
Is there any other way to do this?
You can use the CSS property display: inline-block but you should also use Media Queries to adjust the width of the inline boxes depending on the screen size of the device reading the page.
You can also use a framework such as Twitter Bootstrap which has a build in responsive framework based on a grid system.
.box-container{
display:inline-block;
width:450px;
}
.box{
display:block;
width:33%;
float:left;
background:#000;
color:#fff;
margin-left:0.3%;
text-align:center;
}
<div class="box-container">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
You might even don't media queries:
Fiddle 1
.box {
display: inline-block;
width: 180px;
height: 180px;
background: #ddd;
}
And Fiddle 2 with floats.
And just the size of result window: what's wrong with it? What is currently not working properly and what are you trying to achieve (both on desktop and mobile)?
What is the proper way of creating a footer div, I have normally used these codes below to set my footer div, I want to know how footer div is being coded industry-standard wise. How would I set the footer so it can go to the bottom of the screen whenever the content is filled up.
Here is my HTML:
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Here is my CSS:
html {
background:white;
height:100%;
}
#wrapper {
width:960px;
margin-right:auto;
margin-left:auto;
}
#header {
background:#000000;
min-height:30px;
}
#content {
background:orange;
min-height:500px;
padding:20px;
}
#footer {
clear:both;
background:black;
min-height:30px;
position:relative;
}
If you're using any HTML version less than 5, then there really isn't a standard and what you've done is as good as many other layouts (although I'd always use classes and never IDs -- but that's a different topic)
If you're using HTML5, which you probably should do whenever you can, you should use the footer tag.
When using HTML5, here's a more standard way of laying out your page:
<header><nav></nav></header>
<main></main>
<footer></footer>
More information on HTML5 layouts is available here:
http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html
https://www.smashingmagazine.com/2009/08/designing-a-html-5-layout-from-scratch/
What I am trying to achieve seems relatively simple, but I can't seem to get it to work.
I want to have my article previews on my website appear in tiled form.
The tiles, for the sake of the argument would be a fixed height and width. Lets say 300px by 300px.
I want then for the title of the article and perhaps even a short excerpt to appear, overlaying the image. Kind of like what theverge.com have.
What I need help with is that Im just trying to do a proof of concept mock up. I can do the specific styling fine myself but its literally just the structure I cant seem to figure out.
I cant seem to get the h1 to overlay the img.
I've tried creating a parent container div, and then containing both elements within separate div containers and giving the container with the h1 or "post info" absolute positioning.
But It never seems to work out quite right.
HTML:
<div class="container">
<div class="feat-img">
<img src="www.sample.com"/>
</div>
<div class="post-info">
<h1>Post Title</h1>
</div>
</div>
CSS:
.container: {width: 300px; height:300px;float:left;}
.feat-img img: {width:300px; height:300px; float:left;}
.post-info: {position:absolute;bottom:0px;}
Ok so I know there is a lot wrong with that style but I just did it off the top of my head there. It has the general jist of my train of thought.
Any help would be greatly appreciated as I havent found anything (Probably becuase I dont really know what Im searching for)
First, you need to know how an absolute div relates to a relative one.
Add
.feat-img {
position:relative;
height:300px;
width:300px;
}
to your CSS,
and place the .post-info div inside the .feat-img div:
<div class="feat-img">
<div class="post-info">
<h1>Post Title</h1>
</div>
<img src="image.jpg"/>
</div>
apply this CSS:
.post-info {
position:absolute;
bottom:0px; /* or whatever position */
left:0px; /* or whatever position */
}
Please have a look at this jsFiddle for a quick mockup: http://jsfiddle.net/ZJT6f/
Cheers,
Jeroen
look on this:
demo
html code:
<div class="container">
<div class="feat-img"><img src="http://lorempixel.com/300/300/"/></div>
<div class="post-info"><h1>Post Title</h1></div>
</div>
css code:
*{margin:0; padding:0}
.container: {width: 300px; height:300px; display:block; position: relative;}
.feat-img img: {width:300px; height:300px; position:absolute; top:0; left:0; display:block;}
.post-info{position:absolute; top:130px; left:0; display:block; width:300px; height:300px; text-align: center; color:#fff;}
I need the id3 displayed below id2 instead of being displayed on the side?
How can I accomplish it in using CSS?
html
<div class="main" ></div>
<div id="id1">Im in div1</div>
<div id="id2">Im in div2</div>
<div id="id3">Im in div3</div>
<div></div>
css
#id1{
background-color:green;
width:30%;
height:200px;
border:100px;
float:left;
}
#id2{
background-color:red;
width:20%;
height:100px;
border:100px;
float:left;
}
#id3{
background-color:yellow;
width:10%;
height:300px;
border:100px;
float:left;
}
http://jsfiddle.net/w9xPP/
the best way to do it is to not use floats. The only reason to use them is to make things horizontal to other things. If you want things to fit together like a puzzle, look at masonry.js
Set clear: left; on #id3 like
#id3{
clear: left;
background-color:red;
width:20%;
height:100px;
border:100px;
float:left;
}
When you use float it tells subsequent elements to attempt to display next to them rather than below. Using clear clears the floats and gets rid of that behavior.
http://jsfiddle.net/w9xPP/1/
It sounds like you might be trying to do columns. #Diodeus is right about the ULs and LIs. You will probably want to refactor that code. However, if you are trying to have two columns of elements you could wrap your elements in a div and float them instead of the items they contain. Your child elements would then be placed within the floated columns. You might also want to check out a grid system like the 960 Grid or Twitter Bootstrap.