I am fairly new to coding and I can't seem to figure this one out... I've included an image that I am trying to replicate just for practice. I can't figure out how to float the image next to the title AND center that title vertically. Then I also need to align the text underneath the title.
This is how I've built the HTML for one of the blocks
<article>
<header>
<img src="#" alt="#" rel="#" />
<h1>This is the header</h1>
</header>
<p>
this is a paragraph full of text that needs to be aligned underneath the title.
</p>
<footer>
Read more, aligned underneath paragraph
</footer>
</article>
And then as far as the CSS goes, I can't figure it out. I am trying to float the image to the left, then clear the float in the p and footer and set a left margin to align it under the title. This works, but then I can't figure out how to vertically center the h1 with the img.
I hope this makes sense. Again, I'm new so I expect most of my stuff to be wrong but I am eager to learn so I am asking!
EDIT: I am not asking anyone to write the code for me. Rather, I want to know if my thinking about the float and margin was right... Everything worked except for the vertical alignment of h1...
The trick to aligning the image and the h1 is to make theminline-block and then vertical-align:middle. No magic numbers required.
article header img,
article header h1 {
display:inline-block;
vertical-align:middle;
}
Codepen Example
I'm in a good mood. Here's an example how you can solve this. There are various possibilities. This is just one of them:
CSS
article {
position: relative;
float: left;
width: 200px;
padding: 0 0 0 60px;
}
article:before {
content: url(http://placehold.it/50x50);
position: absolute;
top: 0;
left: 0px;
width: 50px;
height: 50px;
}
Demo
Try before buy
Related
So the banner I made at the top of the page is too short horizontally.
I already tried adding "width: 200%;" to the CSS but it only made the space around the image bigger, not the image itself. Please help.
The banner is the giant purple one at the top of this page:
http://www.neopets.com/~ellenore
p.s. please don't make fun of my love for neopets. xD
}
h1 { .left
width: 200px;
margin-left:0px;
margin-right: 0px;
margin: -8;
letter-spacing: -1px;
}
<h1>
<img src="image is here">
</h1>
If you change your H1 tag to:
<h1 style="
width:100%;
height:288px;
background-image: url('http://i60.tinypic.com/rse735.png');
display: inline-block;">
</h1>
Then your image will automatically repeat. However, as it stands your image doesn't repeat too well. So, you'll probably want to edit in your photo editing s/w.
I'd recommend not stretching your image as it won't look very good.
Also, you may want to create your "Shaggy Little Lion" text as a separate graphic which can be centered on top of the image below.
Yes, obviously I'm doing it wrong. Why can't it be as easy as horizontally aligning stuff? I sit and my work is halted for hours on end trying to look up how to vertically align in the middle, so I don't have to bug you guys with my stupid most-likely really easy to you question.
Display Block or Table-Cell, everything I read never works. I thought "maybe if I horizontally align my img with .divID img and then vertically align the div itself" sadly, I wish that'd work. But even when I did try centering the div vertically in the middle, it messed up the image centering and didn't even work.
TL;DR: I hate trying to vertically align stuff so much.
I'm trying to get my header image centered vertically and horizontally. This my code I'm working off.
HTML
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="http://i.imgur.com/d0umnxt.png" />
</div>
</div>
</div>
CSS
body {
margin: 0px;
}
#header {
width: 100%;
height: 100px;
background-color: #151B1F;
}
#logo {
display: block;
margin: auto;
}
I hate table and table-cell just as much as the next guy, but when you know the height of the parent element (#header in your case), things become really easy.
Here's a working fiddle.
You just need to add the following styles to your CSS:
#header {
display: table;
}
#logo {
display: table-cell;
vertical-align: middle;
text-align: center;
}
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.
I styled an image with float:left, and predictably, the text of the header after it appears to the right of the image (if it helps, the context for this situation is a logo and title next to each other in the header of a website).
When I look at the header element (h1), it takes up space behind the image (overlapping). The text is still next to the image, but the background of the h1 element overlaps with the image.
<div id="header">
<img src="logo2.png" />
<h1>AlanHoRizon</h1>
<p>
...
#header img {
float: left;
}
Is this how floating is supposed to work? Is background synonymous to the padding in the css box model? What if I wanted the header element to begin completely after the image, including the background (which is what I expected float to do actually).
Doesn't actually affect the appearance of the header, as everything appears as it should, but I'm curious, as it would add to my understanding of html and css web design.
thanks.
HTML:
<div id="header">
<img id="logo" src="http://lorempixum.com/100/100/abstract" alt="" />
<div>
<h1>AlanHoRizon</h1>
<h3>Site description</h3>
</div>
</div>
<div id="content">
<p>Lorem ipsum dolor ...</p>
</div>
CSS:
#header:after {
display: block;
clear: both;
content: ".";
visibility: hidden;
height: 0;
line-height: 0;
}
#logo {
float: left;
}
#header div {
float: left;
padding: .25em;
}
And here's the complete jsfiddle example
modify the css code to:
h1
{
float:left;
}
img
{
float:left;
}
This should work. The following will produce the heading on the left of the image.
Actually, I think I found an answer to my question. Simply put, it seems like this is just how floating behavior works. The content is pushed over, but the background and borders still go behind the float:
http://phrogz.net/CSS/understandingfloats.html#ascolumns
I'm not sure if padding is synonymous to background, but I did test the header elements "padding" simply by making the background color red, and the background indeed is behind the float. In terms of the css box model, I'm still not quite sure what's going on.
I've used Blueprint to prototype a very simple page layout...but after reading up on absolute vs. relative positioning and a number of online tutorials regarding vertical positioning, I'm not able to get things working the way I think they should.
Here's my html:
<div class="container" id="header">
<div class="span-4" id="logo">
<img src="logo.png" width="150" height="194" />
</div>
<div class="span-20 last" id="title">
<h1 class="big">TITLE</h1>
</div>
</div>
The document does include the blueprint screen.css file.
I want TITLE aligned with the bottom of the logo, which in practical terms means the bottom of #header.
This was my first try:
#header {
position: relative;
}
#title {
font-size: 36pt;
position: absolute;
bottom: 0;
}
Not unexpectedly, in retrospect, this puts TITLE flush left with the left edge of #header...but it failed to affect the vertical positioning of the title. So I got exactly the opposite of what I was looking for.
So I tried this:
#title {
position: relative;
}
#title h1 {
font-size: 36pt;
position: absolute;
bottom: 0;
}
My theory was that this would allign the h1 element with the bottom of the containing div element...but instead it made TITLE disappear, completely. I guess this means that it's rendering off the visible screen somewhere.
At this point I'm baffled. I'm hoping someone here can point me in the right direction. Thanks!
don't go changing positioning or floating of the blueprint classes. That will mess up the framework.
What you are trying to do is going to be difficult, because what you are trying to do (I assume) is align the baseline of the type with the bottom of the image. There is no easy way to determine the baseline of type via CSS. So getting them aligned is going to be entirely dependent on the particular font that loads for your user. If your image is 50px high, you could start by setting the line height of your h1 to 50px and then tweak from there. But understand that there will be variance from browser to browser, font to font.
You're probably better off making your headline part of the image then use some image replacement techniques to hide the text.
Give this a go and let me know if it is what you are trying to achieve?
HTML:
<div id="container">
<div class="logo">Logo here</div>
<h1>TITLE</h1>
</div>
CSS:
#container{
background-color:#ccc;
position:relative;
width:300px;
height:200px;
}
.logo{
width:110px;
height:40px;
background-color:#ff0000;
margin: 0 auto;
}
#container h1{
font-size:120%;
font-weight:bold;
text-align:center;
}
Here's a live demo: http://jsfiddle.net/jrLL2/