I am trying to code a website using CSS. My header looks like this below. It is consisted of two child divs - logo and topright. Whenever I minimize the width of the screen, topright gets shunted downwards onto the next row. The two divs are floated left and right respectively, and should share the same row. However, I do not want topright to be shunted to the next row. How can I fix this?
<div id="header">
<div id="logo">
<h1>Logo</h1>
</div>
<div id="topright">
<div id="phone">
<p>here</p>
<h6>Learn about out services</h6> </div>
<div id="ssl">
<img src="images/ssl.png" width="150" height="39" align="right" />
</div>
</div>
My css code is
#header {
width: 100%;
position:relative;
clear:both;
}
#logo {
float: left;
margin-top: 20px;
display: block;
}
#logo h1 {
text-indent: -2000px;
background:url(images/logo.png) no-repeat;
display:block;
}
#logo h1 a {
display:block;
width: 381px;
height: 97px;
}
#topright {
float: right;
margin-top: 20px;
display: block;
}
#phone {
float: left;
background:url(images/phone.png) no-repeat right;
height: 70px;
padding-top: 40px;
padding-right: 60px;
text-align:right;
}
#phone p {
font-weight:bold;
font-size: 1.4em;
}
#phone h6 {
font-weight:bold;
font-size: 0.8em;
color:#6F694F;
}
#ssl {
float: right;
margin-top: 40px;
margin-left: 20px;
}
Put min-width: 1000px into logo's css. This ensures that there is always 1000px, however hidden, that the topright div can fit inside even if it is off the screen.
Related
I have floated the image left with a class of logo. I apply a background color for h1 and the image but it does not appear for some reason. Why is this happening? I have floated the image because the text appears below the image not top of the image. Is there a way to deal with it?
JS Fiddle - https://jsfiddle.net/z8cw31j9/
#import url(http://fonts.googleapis.com/css?family=Niconne);
body {
background: #e6e3d7;
font-size: 16px;
}
header {
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo {
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font: 300% 'Niconne', cursive;
line-height: 200%;
height: 0;
color: white;
margin-left: 2%;
background: blue;
}
.clear {
clear: both;
}
.search {
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300">
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
Actually background color was set successfully, but you can't see because of zero height:
header h1 {
height: 0;
}
#import url(http://fonts.googleapis.com/css?family=Niconne);
body{
background: #e6e3d7;
font-size: 16px;
}
header{
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo{
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font:300% 'Niconne', cursive ;
line-height: 200%;
color: white;
margin-left: 2%;
background: blue;
}
.clear{
clear: both;
}
.search{
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300" >
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
header h1{...enter code here...}
remove height:0;
The color you applied to the img tag is actually there. It's just directly behind the image, so you can't see it. If you apply padding: 25px to the .logo class you'll see what I mean.
In terms of the h1, you've given it a height: 0, so there's no space to show the background color.
for your h1, the background is not working because you set the height of the element to 0, so there wouldn't be any color that will show up.
and as for your img, the background is not working because you have a image in front of it.
If you want to see the background for the img, you can add a padding for it
Super weird: For some reason, my site's front page layout (CSS) shifts to the right on a mobile device when it's supposed to be centered? See: http://www.stylerepublicmagazine.com
Does anyone know why this is? I've seen this error on other forums, but no one seems to have a solid fix for it.
Here's the main portion of the stylesheet for my template:
#wrapper {
position:absolute;
width:100%;
margin: 0, auto;
margin-top:60px;
}
#socialmedia {
float:right;
}
#topbanner {
margin-left:180px;
width:990px;
}
#magnavigation {
position:absolute;
margin-top:150px;
margin-left:150px;
}
#featureslides {
position:absolute;
margin-top:240px;
margin-left:190px;
width:1000px;
}
div.img
{
padding-top:40px;
margin: 0px;
height: 150px;
width: 150px;
float: left;
text-align: left;
vertical-align:top;
padding-right:62px;
}
div.imglast
{
padding-top:40px;
margin: 0px;
height: 150px;
width: 150px;
float: left;
text-align: left;
vertical-align:top;
}
div.img img
{
display: inline;
margin: 3px;
}
div.articlename {
padding-top:5px;
font-family:'Oswald', sans-serif;
font-size:1.4em;
}
div.desc
{
padding-top:5px;
text-align: left;
font-family:helvetica;
font-size:1em;
font-weight: normal;
width: 140px;
margin: 0px;
padding-bottom:100px;
}
#morefeatures {
margin-top:180px;
float:left;
width:685px;
padding-right:15px;
padding-bottom:20px;
}
#adverts {
width:300px;
float:right;
margin-top:180px;
}
.FrontHeading {
font-family: 'Oswald', sans-serif;
font-size:30px;
padding-bottom:5px;
}
Thanks,
B
You're declaring a lot of margin-left properties which causes the elements to shift to the right.
Before and after removing the margins on the left.
As some others pointed out, you're simply using too many position: absolute properties in your CSS and basically, you've tuned your layout for one resolution (1440 wide). For example, on my resolution of 1920x1080, your layout appears on the left.
You can fix this by removing all position: absolute properties and using substitutes. For example, for the main column, you should be using margin: 0 auto, which will center it.
I've created an example of a layout you can use, to get an idea of the various types of positioning you'll want to use for your layout. I essentially duplicated the layout (more or less) using different properties that should scale across resolutions and devices.
The Fiddle
HTML
<div id='wrapper'>
<div id='banner'>
Your logo
<div id='social'>FACEBOOK | TWITTER</div>
</div>
<div id='slides'><img src='http://placekitten.com/500/200'/></div>
<div class='news'>News item 1</div>
<div class='news'>News item 2</div>
<div class='news'>News item 3</div>
<div class='news'>News item 4</div>
<div class='news last'>News item 5</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div class='blog'><div class='entryimg'><img src='http://placekitten.com/50/50'/></div> Blog entry</div>
<div style='clear: both'></div>
</div>
CSS
#wrapper {
width: 500px;
margin: 0 auto;
font: 18px sans-serif;
}
#banner {
background: #8888ff;
padding: 20px;
margin-bottom: 5px;
}
#social {
float: right;
margin-top: -10px;
font-size: 50%;
}
#slides {
margin-bottom: 5px;
}
.news {
background: #88ff88;
display: inline-block;
*display: inline; /* IE8- hack */
zoom: 1; /* IE8- hack */
margin-right: 10px;
width: 78px;
text-align: center;
padding: 5px;
}
.news.last {
margin-right: 0;
}
.blog {
margin-top: 8px;
clear: both;
}
.blog .entryimg {
float: left;
margin-right: 10px;
}
Result
Too much position absolute for the CSS I think.
Change these few CSS for content to center.
#wrapper {
width: 100%;
margin: 0 auto;
margin-top: 60px;
}
#topbanner {
margin-left: 180px;
width: 990px;
margin: 0 auto;
}
#magnavigation {
margin-top: 150px;
margin-left: 150px;
margin: 0 auto;
}
#featureslides {
margin-top: 240px;
margin-left: 190px;
width: 1000px;
margin: 0 auto;
}
I suggest you to reconstruct your section as it's quite a mess and hard to control from what I saw.
bit of a CSS newb here. I'm using the fluid grid layout in Dreamweaver CS6. I created a headercontainer div, then headerleft and headerright divs inside it. I've added an image to headerleft and typed some text in headerright. I want to be able to have the text remain in line with the center of the image no regardless of resizing from the fluid layout.
What's the best way to do this? I put the two headers in a container div hoping that it will make it easy for me to align the two divs within the container, but I'm just not sure how to achieve it. Here's the code I currently have for this section of the page:
EDIT: Code Now says (but still doesn't work):
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 90.5666%;
padding-left: 0.2166%;
padding-right: 0.2166%;
}
#headercontainer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: left;
}
#headerleft {
clear: both;
float: left;
margin-left: 0;
width: 49.7607%;
}
#headerright {
clear: none;
margin-left: 0.4784%;
width: 49.7607%;
}
And the html says:
<div class="gridContainer clearfix">
<div id="headercontainer">
<div id="headerright">
<h2>Support For All Your Gadgets & Tech!</h2>
</div>
<div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2>
</div>
</div>
Thanks a lot!
remove display:block; from your #headerleft and #headerright
Also, you can only set float:left; on the headerleft id, and put the div headerright before the left one in your html code.
Try this code:
.gridContainer {
margin-left: auto;
margin-right: auto;
width: auto;
padding-left: 15px;
padding-right: 15px;
}
#headercontainer {
float: left;
margin-left: 0;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: left;
position:relative;
}
#headerleft {
float: left;
margin-left: 0;
width: 50%;
}
#headerright {
clear: none;
margin-left: 50%;
}
<div class="gridContainer clearfix">
<div id="headercontainer">
<div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2>
</div>
<div id="headerright">
<h2>Support For All Your Gadgets & Tech!</h2>
</div>
</div>
</div>
I have a situation where I have one div of fixed width, containing an image pulled from Twitter, and another div of variable width containing user text of variable length. What I want to achieve is something like the following:
I can do this well enough with a single div that has background-image and padding-left. But I want to be able to apply border-radius to the img element, which simply won't be possible with a background-image.
If I do text-align: center on the outer div, it gets me halfway there. Here's a DEMO and a screenshot:
But this obviously isn't fully what I want.
How can I accomplish this?
Ask and you shall receive — a simplified jsFiddle example:
As an added bonus, the text is vertically centered too!
HTML:
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png" />
</div>
<div class="logo-name">
AppSumo is a really really long title that continues down the page
</div>
</div>
CSS:
.logo {
background-color: #eee;
display: table-cell;
height: 100px;
position: relative;
text-align: center;
vertical-align: middle;
width: 600px;
}
.logo-container {
background-color: #fff;
border-radius: 10px;
left: 10px;
position: absolute;
top: 10px;
width: 75px;
}
.logo-name {
font: bold 28px/115% Helvetica, Arial, sans-serif;
padding-left: 85px;
}
Would it be something like this?
http://jsfiddle.net/uPPTM/6/
.logo {
width:80%;
margin:auto;
background-color: red;
}
.logo-container {
border: 1px solid gold;
width:73px;
height: 73px;
display: inline-block;
vertical-align:middle;
}
.logo-name {
display: inline-block;
}
You can float the image container (or image itself without the container) to the left, clearing anything the left... and then float the text to the left, clearing anything to the right.
.logo-container{
float:left;
clear:left;
}
.logo-name{
float:left;
clear:right;
}
You can adjust the distance of the text using margins.
.logo-name{
float:left;
clear:right;
margin-top:10px;
margin-left:5px;
}
Use absolute positioning with a left position to push the title text past the image.
http://jsfiddle.net/uPPTM/9/
.logo { width: 50px; }
.title {
position: absolute;
top: 0;
left: 50px;
font-size: 32px;
text-align: center;
}
img {
border: 1px solid gray;
border-radius: 15px;
}
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png">
</div>
<div class="logo-name">AppSumo</div>
</div>
I am trying to align a element center in a div where i am not giving any width to parent div becouse it will spread according to screen size , there is total 3 element in div :
Buttons
Heading
Logo
buttons will always align left and logo will align right whenever screen size will be change and the heading will always align center like this
My code is here
http://jsfiddle.net/7AE7J/1/
please let me know where i am going wrong and what css i should apply for getting the element (heading) align center always.
HTML
<div id="header">
<div id="buttons">
link 1
link 2
</div>
<h1>Heading of the page</h1>
<div id="logo">
<a href="#">
<img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" />
</a>
</div>
</div>
CSS
#header {
background:green;
height:44px;
width:100% }
#buttons {
float: left;
margin-top: 7px;
}
#buttons a {
display: block;
font-size: 13px;
font-weight: bold;
height: 30px;
text-decoration: none;
color:blue;
float:left}
#buttons a.button_back {
margin-left: 8px;
padding-left:10px;
padding-top: 8px;
padding-right:15px }
#header h1 {
color: #EEEEEE;
font-size: 21px;
padding-top: 9px ;
margin:0 auto}
#logo {
float: right;
padding-top: 9px;
}
You can use inline-block for this:
#header {
text-align: center;
}
#header h1 {
display: inline-block;
}
How about this:
#header {
position: relative;
text-align: center;
}
#header h1 {
display: inline;
}
#header #buttons {
position: absolute;
left: 0;
top: 0;
}
#header #logo {
position: absolute;
right: 0;
top: 0;
}
display: inline is actually a bit more cross-browser than display: inline-block;
Try
.centered {
margin: 0 auto;
}