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/
Related
I thought I had it all working. an <img>, a div.wrapper around it (with position:relative, and an <i class="icon-edit"></i> with absolute position just beneath the right top position of the <img>. something like this:
<div class="userLogo" >
<img ng-show="user.image_url" ng-src="{{user.image_url}}" /> //data from angular, doesn't make a difference here
<div class="userEdit"><i class="icon-edit hand"></i></div>
</div>
with css (less style but you can understand):
.userLogo
{
width: 233px;
height: 233px;
img {
height:233px;
}
float: left;
//border: 1px solid #borders;
position:relative;
}
.userEdit
{
background: #bajeBack;
width: 25px;
height: 25px;
line-height: 25px;
color: #lightGreen;
position: absolute;
top: 13px;
right: 13px;
z-index: 50;
font-size: 19px;
padding: 3px 2px 2px 4px;
text-align: center;
opacity: 0.7;
.icon-edit{
}
}
and then, playing with the webapp it hit me: The image size can change! since I don't want to use a set width/height (that would distort the proportion of some images) I just set the height (to fit the design) and let the browser resize the width accordingly.
My problem; A narrow image would break the design - the edit icon would be hang in air, and not on the image at all, since it's positioned according to the userLogo.
My question: how can I do the same "absolute" positioning according to the image ? since it can't be the container. please enlight me. and don't hesitate to suggest changes to the html if needed. I'll be more the happy to learn something new!
Thanks!
If i understand you correctly, you need to constrain your image to a set space. How about using max-height and max-width.
.userLogo img {
max-height: 233px;
max-width: 233px;
}
It's pretty well supported these days: http://caniuse.com/#search=max-width
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/
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.
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.