In my HTML5 document I want to display an image on the far left and right of the page, and then centered inbetween them have my text. I can't for the life of me get the syntax correct. I've been looking at tons of answers for this and but I'm missing something.
My right side image is placed on the next "line" and so the text isn't centered properly.
In my index.html I put this:
<header>
<img class="logo floatLeft" alt="Logo" />
<h1 class="logoHeader">Text Here</h1>
<img class="logo floatRight" alt="Logo" />
</header>
and for my CSS I have this:
.logo {
width: 150px;
height: 120px;
content: url(logo.jpg);
}
.logoHeader {
height: 120px;
vertical-align: middle;
text-align: center;
}
.floatLeft { float: left; }
.floatRight { float: right; }
You need to put both images before ´h1´ element
<header>
<img class="logo floatLeft" alt="Logo" />
<img class="logo floatRight" alt="Logo" />
<h1 class="logoHeader">Text Here</h1>
</header>
It works, here is jsFiddle
EXPLANATION:
If you put div (or h1 or any block element) between two floating elements, its the same as you did clear:both between them, so they will never appear in the same horizontal level.
Also, off-topic here, but if you are using alt="" attribute, due to accessibility issues, if you don't have anything reasonable or descriptive to write, better off leave it empty (but still to keep the attribute) so like this alt="" is fine! The screen reader of a blind person will then skip this image because it is irrelevant for him, instead of bothering him reading "logo graphics"..who cares?. If you don't put alt attribute at all, then it will read image name, so alt="" is great if nothing more descriptive is needed.
Could your header have the 2 logos as background images, leaving the h1 to be the only semantic element in the header?
<header>
<h1>Headline</h1>
</header>
header {
background: url(logo1.png) left top no-repeat,
url(logo2.png) right top no-repeat;
}
h1{
text-align:center
}
See fiddle
In h1 selector at margin-top and margin-bottom
you just need to put 0
header{
border:1px solid black;
}
img, h1{
float:left;
height:100px;
text-align:center;
}
.logo1 {
content: url(logo.jpg);
width: 25%;
}
.logo2 {
content: url(logo.jpg);
width: 25%;
}
h1{
width:50%;
margin-top:0;
}
}
You float the images left & right, and put your text between the two image, like this.
<div class="container">
<div class="left-image">
</div>
This text is centered
<div class="right-image">
</div>
</div>
Jsfiddle
header{
border:1px solid black;
}
img, h1{
float:left;
height:100px;
text-align:center;
}
.logo1 {
content: url(logo.jpg);
width: 25%;
}
.logo2 {
content: url(logo.jpg);
width: 25%;
}
h1{
width:50%;
}
}
UPDATED
Related
Excuse the title of the post - I am at a loss on how to describe the design problem I am attempting to implement... (which is likely stopping me from finding an appropriate solution).
I have a wireframe/comp that came from my designer:
Which, in terms of a grid, looks something like this:
Now... the obvious problem is how do I make certain content span two rows or columns of a grid or table ? B/C the way I read this, either the squarish logo on the left or the 'coming soon' text on the top needs to span across two fields...
Is this even possible ?
Any help appreciated.
My solution would be to make each of the three sections a container using a div.
You can then position the elements as desired with adjustable margins and padding.
.container{
background: #333;
padding:10px;
color:white;
height:auto;
width:500px;
display:inline-block;
}
.icon{
float:left;
padding:5px;
height:30px;
width:30px;
background-color:green;
display:inline-block;
margin-right:10px;
}
<div class="container">
<div class="icon">
</div>
<div class="coming-soon">
COMING SOON TO MOBILE
</div>
<div class="downloads">
<button>
Apple
</button>
<button>
Android
</button>
</div>
</div>
If needed, you can target the coming-soon and downloads classes for more customization.
There are a number of solutions to this. Here's one using float:left and nested divs.
div {
float: left;
}
#group {
width: 200px;
height: 100px;
}
#one {
width: 100px;
height: 100px;
background-color: red;
}
#two {
width: 200px;
height: 30%;
background-color: green;
}
#three {
width: 200px;
height: 70%;
background-color: blue;
}
#four {
width: 100px;
height: 100px;
background-color: red;
}
<div id="one">
</div>
<div id="group">
<div id="two">
</div>
<div id="three">
</div>
</div>
<div id="four">
</div>
A much simpler layout would be to go.
HTML
<div class="wrapper">
<img style="float: left" src="your img" alt="whatevs"/>
<ul style="float:left">
<li><b>COMING SOON TO MOBILE</b></li>
<li><img src="1" alt="inline-block"/><img src="2" alt="inline-block"/></li>
</ul>
</div>
Simple CSS
.wrapper ul li img {
display: inline-block;
width: 50%;
height: auto;
}
The fact here is, the code is simplified, the layout is easy to read, its less divs, and far more less complicated. But, truth be, theres a 100 ways to do this so find the method that fits your size shoe best.
I'm trying to add a subtitle below the title on my page. I've got an image to the left of the existing title, and the title is centered to the middle of the image. I'm trying to add a subtitle in a smaller font below the title and I can't seem to figure it out. The code I'm using is like so:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="clear"></div>
</div>
</div>
</div>
.container {
display:table;
width:100%;
height:auto;
background-color:#171717;
}
.container .text {
display:table-cell;
height:100%;
vertical-align:middle;
font: bold 70px Verdana;
color: #666666;
}
and here's what that looks like:
(I'm not including the code for the menu even though it's in the picture).
And what I'm trying to achieve is this:
Does anyone have any ideas?
You have a div.text which contains your title. Underneath that you need to place your subtitle. This code is called "html markup". You should use <h1> - <h6> tags for titles.
Here is an example (fiddle)
.header {
text-align: center;
}
.header img {
float: left;
}
.clear {
clear: both;
}
<div class="header">
<img src="http://dummyimage.com/100/000000/fff" />
<h1>Hello world</h1>
<h2>This is a subtitle</h2>
<div class="clear"></div>
</div>
Preview:
You can in fact do this with CSS.
div.text {
font-size: 32px;
font-weight: bold;
display: inline-block;
color: #fff;
vertical-align: top;
padding: 2px 1em;
}
div.text:after {
display: block;
text-align: center;
font-size: 20px;
margin-top: 1em;
content: "This is the subtitle";
}
.container {
background-color: #111;
display: inline-block;
}
.container img {
display: inline-block;
}
Now, whether you should do that with CSS is another question entirely. Content that's actually part of your page's message should be part of the page, not part of a style sheet.
Also, your "container" should probably be an <h1> tag. Also you don't need to close <img> tags, and self-closing tags are pointless in an HTML5 document (which yours may or may not be I suppose).
Try this:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="subtitle">My subtitle</div>
<div class="clear"></div>
</div>
</div>
</div>
.text {
margin-bottom: 0px;
padding-bottom: 0px;
}
.subtitle {
margin-top: 0px;
padding-top: 0px;
}
There's probably 100 different ways to do this... Here's one. In your line of text, just use a <br /> and a <span>
<div class="text">This is the Title<br /><span>The SubTitle would go here</span></div>
Then style your subtitle like so:
.container .text span {
/* Something styled here */
}
The html your using could be improved as it is not really appropriate.
Try something like this
<div class="header">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<h1>this is the title</h1>
<h3>This is the subtitle<h3>
</div>
.header{
overflow:hidden
}
.header img {
float:left;
}
.header{
text-align:center;
}
Thanks, #Sergio S. That worked for me. A more general way of doing this, based on Sergio's answer (is the following):
CSS:
.classofheadertext {
margin-bottom: 0px;
padding-bottom: 0px;
}
.classofsubtitletext {
margin-top: 0px;
padding-top: 0px;
}
Full credit once again to Sergio. I've just put this in simple form :D
<div align="center">
<div class="se" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="uk" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="de" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div></div>
<div> i dont want this menu div to jump up and down when hover</div>
css file:
.se {margin-top:-30px;}
.se:hover {margin-top:-15px;}
.uk {margin-top:-60px; margin-left:-150px;}
.uk:hover {margin-top:-45px;}
.de{margin-top:-60px; margin-left:150px;}
.de:hover {margin-top:-45px;}
I just want the flags to slide down when hover. As you see in my fiddle, it's acting strange depending on with flag i hover first.
This could probably be solved in an easier way? http://jsfiddle.net/XScjm/1/
I think you are in the wrong way to acomplish what you want, first you can't offset the image with margin because that affects all arround the element. And the way you are trying to position each <div> with margin is unrecommended.
Try to do it this way:
.center {
text-align:center;
}
.se, .uk, .de {
position:relative;
display:inline-block;
cursor:pointer;
}
.se:hover, .uk:hover, .de:hover {
top:15px;
}
Check this Demo
Have a look at this one :-
DEMO
<div align="center" class="one"></div>
.one{ height: 60px; }
try this:
.se, .uk, .de {
float: left;
margin-right: 5px;
margin-top: -40px;
}
.se:hover img, .uk:hover img, .de:hover img {
margin-top: 20px;
}
This will work. JSFiddle.
HTML
<div id="center" align="center">
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
<div class="flag" style="width:60px;height:60px;">
<img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
</div>
</div>
<div> i dont want this menu div to jump up and down when hover</div>
CSS
.flag {margin-top:-30px; position:relative; display:inline-block;}
.flag:hover { top:15px; }
#center { height: 50px; }
I have a strange situation, where my middle div is slightly downward.
Here's a screenshot:
HTML :
<div id="footer">
<div class="content">
<div id="info1">
<img src="img/temp.png" alt="About me" />
<h4>About Me</h4>
<p>this is about me section</br>and this is the other line</br>and this is a third line</p>
</div>
<div id="info2">
<h4>Random Photos</h4>
<div id="randomPhotos"></div>
</div>
<div id="info3">
<h3>Follow Me</h3>
<div>
<img src="img/temp.png" alt="facebook" />Facebook
</div>
<div>
<img src="img/temp.png" alt="twitter" />Twitter
</div>
<div>
<img src="img/temp.png" alt="email" />E-mail
</div>
</div>
</div>
</div>
CSS:
#info1, #info2, #info3
{
padding: 10px;
display:inline-block;
}
#info1
{
width:20%;
}
#info1 img
{
margin-right:3px;
width:20px;
height:20px;
background-image:url('../img/glyphicons-halflings.png');
background-repeat:no-repeat;
background-position:-162px 1px;
}
#info1 img, #info1 h4
{
display:inline-block;
}
#info2
{
width:55%;
border-left:1px solid gray;
border-right : 1px solid gray;
}
#info3
{
width:15%;
}
#info3 img
{
width:20px;
height:20px;
margin-right:5px;
}
#info3 img[alt="facebook"]
{
background : url('../img/result.png') no-repeat 0px -30px;
}
#info3 img[alt="twitter"]
{
background : url('../img/result.png') no-repeat 0px -60px;
}
#info3 img[alt="email"]
{
background : url('../img/result.png') no-repeat 0px 0px;
}
#info2 div
{
padding:3px;
}
#randomPhotos
{
height : 100px;
}
I'm really not that good at CSS, so it maybe a small problem. I just can't find it out.
Most browsers, for elements using display:inline-block will automatically use vertical-align:baseline on that element unless you use a CSS reset (that will probably also define the defacto standard as vertical-align:baseline.)
This is the reason for what you are seeing, each one of your info divs is aligning to the baseline. As the central div is smaller height wise you get the gap you are seeing at the top.
To fix it:
#info1, #info2, #info3
{
padding: 10px;
display:inline-block;
vertical-align:top;
}
The second problem you will probably encounter is that now it is aligned top, you have a 'gap' at the bottom with no left or right borders. Either have the borders managed by the full height divs or make all the divs the same height.
I suggest you to add float: left to each of your divs. This solve your problem.
example
You could also try to
position:absolute;
the divs inside the container and then specify
top:0px;
left: (left div with)px;
I am always working with absolute, hope it helps.
#info2
{
vertical-align: top
}
should do the trick.
It should be very simple, but I am, so it's not ...
The first thing on the page, right after <body>, I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page.
Can you do that without knowing the width og the image?
Yes, put image in one div, and text in another, define "float: right" property for the div with the image, and "float: left" for div with the text in CSS
<div class="div1"><img src=...></div>
<div class="div2">text</div>
<style type="text/css">
.div1 {
float: right;
}
.div2 {
float: left;
}
</style>
<div id="banner">
<div style="float: left; width: 50%;">
left - just put your text here
</div>
<div style="float: right; width: 50%;">
right - just put your image here
</div>
</div>
You may also want to use a clearfix (google it) technique to ensure the banner div always has height no matter how big the image is.
Here's a fiddle : http://jsfiddle.net/KaHjd/1/
I've assumed that you want the image right aligned as well.
#header {
overflow:auto;
}
#branding {
float: left;
padding: 10px;
background: #00AA00;
}
#logo {
float:right;
padding: 10px;
background: #aa0000;
overflow:auto;
}
#logo img {
float:right;
}
<div id='header'>
<div id='branding'>
some text
</div>
<div id='logo'>
<img src='http://placekitten.com/200/100'>
</div>
</div>
Of course we can. But your image must be small enough in order for your text not to overflow the banner.
HTML
<div class="banner">
<span>Text goes here</span>
<img src="" alt="" />
</div>
CSS
.banner { overflow: hidden; width: 100%; }
.banner span { float: left; }
.banner img { float: right; }