Take a look here http://www.basenharald.nl/3d.
For the home part i put on some black borders so you can see what i mean.
The problem:
I need to position the 2 blocks (the "hey"block and the right part) next to each other in the center and position them individual from there on out.
The logical thing to do is to use display: inline block. Now the problem is that it does not valign top, so i cannot position them with margins.
Basically what i want to do is position the "hey"part slightly to the left and the "right"part slightly to the right and a tat downwards.
What is the best way to do so? It needs to be centered all time cause of the perspective effect and resolutions.
Hope i am clear enough, otherwise just ask.
this is the css part i am talking about:
#home-welkom { text-align:left; width: 465px; margin: 360px 400px 100px; 230px; margin: 0 auto; display: inline-block; color:#787778; font-size:11px; border:1px solid black; }
#home-right { text-align:left; width: 330px; margin: 50px 0px 0 0; position: relative; margin: 0 auto; display: inline-block; border:1px solid black; }
Also not that the margin property does not influence the divs at all
You're going to have to rethink your design strategy. Here's a few pointers:
Use divs instead of lists to layout your page (lists are good for menus, etc)
margins can only be used once per class
use div floats to position your divs side by side
store your javascripts externally this way your code will be cleaner
Now for your question this is what you're looking for to position your elements:
<div id="wrapper" style="position: relative; margin: 0 auto; width: 800px; text-align: left">
<div id="leftcol" style="float: left; width: 400px;">left column</div>
<div id="rightcol" style="float: left; width: 400px;">right column</div>
</div>
Finally I would make sure and validate my code and you can do so here: http://validator.w3.org/
Hope this helps.
Related
Please forgive my lack of design knowledge but I am confused by a bit of div positioning. I have a header div. Within that header I want two divs, one for the logo, and below that another for some content. I have labeled them logo and card respectively. However, when I try to put them both into the html, calling them in proper order, the card div simply lays atop the logo div rather than beneath it. I have tried using pretty much every variation of "clear: xxx" both in the css and inline within the html but they have no effect whatsoever. Can someone explain why this isn't working? Posting relevant css and html below.
#header {
height:440px;
width: 100%;
margin-top: 0px;
background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
}
#header .logo {
position:absolute;
top: 3px;
left: 50%;
margin-left: -198px;
}
#header .card {
position: absolute;
left: 50%;
margin-left: -500px;
height: 367px;
width: 999px;
background:url(/assets/hback.png) 0 0 no-repeat;
clear: left;
}
And the HTML:
<div id="header">
<div class="logo"><%= link_to image_tag("srlogo.png",alt:"Logo"), 'index.html' %></div>
<div class="card">Some text here</div>
</div>
Any help is greatly appreciated.
Edit: So yes, clearly I am an idiot for trying to use "clear" with no floated elements. I understand that now. So how do I get one division below, rather than on top of, the other?
Get rid of all your absolute positioning. It's rubbish.
http://jsfiddle.net/2BpfF/1/
If you want the .logo DIV to be centered on the page and you know it's width you can do this:
#wrapper {
width: 999px;
margin: 0 auto;
}
#header {
height:416px;
margin-top: 0px;
}
#header .logo {
margin: 0 auto;
width: 333px;
}
#header .card {
background-image: url(http://lorempixel.com/999/367/);
background-repeat: no-repeat;
height: 367px;
}
HTML
<div id="wrapper">
<div id="header">
<div class="logo"><img src="http://lorempixel.com/333/49/" /></div>
<div class="card">Some text here</div>
</div>
</div>
margin: 0 auto; adds 0px margins to the top and bottom of the DIV while calculating the left and right amount for you so it will center. This will only work with a known width.
It seems like you want to center everything. So I would start with a wrapper DIV and center that. I did this with #wrapper.
Remember that source order matters and that by default your .logo DIV will display before your .card DIV without any CSS.
You can also remove the width: 100%; from your #header DIV as all DIVs by default are block level elements. Block level elements always take up the full width of their containing element unless told otherwise.
As for the opacity of the background image I think the best solution would to do this for your image file and not with CSS as I don't think opacity is very versatile yet. What I mean my this is if you set opacity: 0.5; to a DIV, then everything in that div is 50% opaque. I'm not a guru on opacity so you'd have to dig into that a little deeper. But I would just set the opacity in your image editor to 50% and output a PNG file so the alpha(opacity) chanels will be there. JPG files do not have alpha channels for transparency.
You don't have any floated elements, so clear has absolutely no effect.
Absolute positioning removes the element from the document flow, so floating and clearing will have no effects on such positioned elements, since floating adjusts the element within its content flow.
Avoid absolute positioning. Same thing you can achieve using something like this :
#header {
height:440px;
width: 100%;
margin-top: 0px;
background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
}
#header .logo {
padding: 5px;
text-align:center;
}
#header .card {
margin-left: auto;
height: 367px;
width: 999px;
background:url(/assets/hback.png) 0 0 no-repeat;
clear: both;
padding: 5px;
}
I feel like this should be (and probably is) answered somewhere, but either that's not the case, I'm not searching the right way, or it's some closely guarded national secret, because I cannot find an answer that works. Specifically, I cannot find an answer that accommodates the image on the left side of my div.
What I'm trying to effect is for the text to be centered horizontally with regards to the entire screen and vertically within the 'header' div. I don't want to use my logo as a background, because I'm using it as a home anchor. I have tried to using 'display: table-cell' and 'vertical-align: middle' to disastrous result. Please, any advice/help/link is appreciated.
CSS:
#header{
width: 85%;
min-width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background-color: #fff;
border-bottom-width: 10px;
border-bottom-style: double;
border-bottom-color: #000;
}
#title{
width: 85%;
margin-left: auto;
margin-right: auto;
position: absolute;
display: table-cell;
vertical-align: middle;
}
#logo{
float: left;
padding-right: 1em;
width: 150px;
}
HTML:
<div id="header">
<img id="logo" src="../images/logo.jpg" alt="Widget News" />
<span id="title"><h1>Site Title</h1></span>
</div>
Also, I'm completely new to using CSS (and pretty useless with xhtml/html5). I'm working on my current project as a means to familiarize myself with CSS/PHP/HTML/JScript, and so far, the CSS/HTML is the only part that I'm having problems with. Any pointers to a good beginner's, but not remedial/'for dummies', guide would also be appreciated.
I'd recommend making your logo absolutely positioned. That will take it out of the flow of the html elements (like a background image does) while keeping it still clickable.
#logo {
position: absolute;
top: 5px;
left: 10px;
width: 150px;
}
That will make it easier to center your title. Here's the full example with a few adjustments to your code:
http://jsfiddle.net/gqvUv/
Your "text-align: center;" keeps everything centered horizontally, and adjusting the line-height of your h1 will work to center it vertically, as long as the title is just one line.
It's easy to get confused by relative and absolute positioning, but this tutorial makes it clear: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Finally, this is my go-to article on centering things with CSS: http://designshack.net/articles/css/how-to-center-anything-with-css/
I want to create large button style divs in the centre of the page and for the most part, it is working. The only thing is that I want some space between them and I just can't seem to get it to work. Below is my CSS. What I have done is create 1 div called Wrapper and then created 2 more divs inside, one called topleft, the other is topright. At this stage, there are just those 2 divs, but (And the reason why the inner divs are called top) I might want to add additional divs on either the same line or perhaps the next line at a later time.
I kept reading that margin is the way to do it, but it won't work with my existing code. Is it because I am already using it in WRAPPER in order to get them centred? I had some trouble getting it to align the way I wanted and it does look the way I wanted, but I suspect my issue is because maybe I centred and aligned them incorrectly if that makes sense?
Basically, my question is how can I get some space between topleft and topright?
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(0,178,219);
}
.topright {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(134,197,73);
}
My HTML is simple:
<div class="wrapper">
<div class="topleft"> ENERGY </div>
<div class="topright"> MINERALS </div>
</div>
Check out this jsfiddle
http://jsfiddle.net/peter/YmKc4/
Updated CSS
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(0,178,219);
float:left;
line-height:200px;
margin:0 5px 0;
}
.topright {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(134,197,73);
float:left;
line-height:200px;
margin:0 5px 0;
}
When you set a line-height to the same height as your div it'll center the content vertically. And floating the divs left I think is a little better than setting their display to table-cell. You also need to reduce the width when setting a margin to account for the margins pixels on either side
your "wrapper" div is 600px, and each internal div is 300px. That leaves no room for any space?
As the title says, I need two divs to be equally high. They should be as high as it needs to be for the content to fit. The current CSS is:
.portfolioleft{
float:left;
width:189px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioleft img{
border-radius: 10px;
}
.portfolioright{
float:right;
width:500px;
background-color: #436FAC;
min-height: 100px;
height: auto;
color: #FFF;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.portfolioright a{
color:#FFFFFF;
}
and the html for the divs is:
<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div>
<div class="portfolioright">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="clear"> </div>
CSS alone cannot tackle this feat (unless you want a hack solution where you can use an image). You will need to implement a JS solution. Since the content is dynamic and you do not know how high the columns will be, you will need to access the DOM to determine the height of the tallest column then apply to the indicated columns. I use the following regularly and it works quite well and is easy to implement.
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
Unfortunately this is a tricky problem in CSS. If you only want to extend the background color of your left sidebar to the bottom of the section (with its height defined by the right div), try wrapping them inside a parent div (which scales to the height of the right div), then positioning the left div with position:absolute and height of 100% like so:
<div class="portfolio">
<div class="portfolioleft">...</div>
<div class="portfolioright">...</div>
</div>
.portfolio {
position: relative;
background: white;
}
.portfolio .portfolioleft {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background: #436FAC;
}
.portfolio .portfolioright {
margin-left: 200px;
}
If BOTH sides are dynamic and you need both heights to match, the only surefire way to make it work across all major browsers is to resort to a table-based layout with two columns, as karmically bad as that might be.
cell properties in your left right div
i checked your code and replace the float into display table-cell
you can check to this live http://jsfiddle.net/rohitazad/prMLh/1/
I have a stack of divs inside of each other, all of which have an ID which specifies CSS only.
But for some reason the surrounding DIV tag only expands to it's anointed height value, and not it's default auto, meaning that although the content is inside, the backing DIV is only a specific height. I need it to adjust the heigh to the size of whatever is inside of it (As there will be user submitted data being echoed out possibly in paragraphs with 500+ words.)
#albumhold {
width: 920px;
padding: 10px;
height: auto;
border: 1px solid #E1E1E1;
margin-left: auto;
margin-right: auto;
background-color: #E1E1E1;
background-image: url(../global-images/albumback.png);
background-position: top center;
background-repeat: repeat-x;
}
#albumpic {
display: block;
height: 110px;
width: 110px;
float: left;
border: 1px solid #000;
}
#infohold {
width: 800px;
background-color: #CCC;
float: right;
height: 20px;
}
#albumhead {
width: 800px;
height: 20px;
text-indent: 10px;
border: 1px solid #000;
color: #09F;
}
#albuminfo {
margin-top: 5px;
width: 800px;
float: right;
color: #09F;
word-wrap: break-word;
}
<div id="albumhold">
<div id="albumpic">Pic here</div>
<div id="infohold">
<div id="albumhead">Name | Date</div>
<div id="albuminfo">Information</div>
</div>
</div>
Help is greatly appreciated.
Floated elements don’t take up any vertical space in their containing element.
All of your elements inside #albumhold are floated, apart from #albumhead, which doesn’t look like it’d take up much space.
However, if you add overflow: hidden; to #albumhold (or some other CSS to clear floats inside it), it will expand its height to encompass its floated children.
There are two solutions to fix this:
Use clear:both after the last floated tag. This works good.
If you have fixed height for your div or clipping of content is fine, go with: overflow: hidden
You probably need a clear fix.
Try this:
What methods of ‘clearfix’ can I use?
Add <br style="clear: both" /> after the last floated div worked for me.
Putting a <br clear="all" /> after the last floated div worked the best for me. Thanks to Brent Fiare & Paul Waite for the info that floated divs will not expand the height of the parent div! This has been driving me nuts! ;-}
You have a fixed height on .infohold, so the .albumhold div will only add up to the height of .infohold (20px) + .albumpic (110px) plus any padding or margin which I haven't included there.
Try removing the fixed height on .infohold and see what happens.
You didn't typed the closingtag from the div with id="infohold.
div will not expand if it has other floating divs inside, so remove the float from the internal divs and it will expand.