I currently have a simple header set up in HTML, and am using CSS to style it. I have created multiple styles: '#header' and '#header #right'. When I use 'float: right;' for the second style I mentioned, it moves the text down almost completely under the header.
Code:
index.html:
<html>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href='main.css' type='text/css' rel=Stylesheet>
<head>
<title>FriendSub</title>
</head>
<body>
<div id='header'>
<font size='+3'>FriendSub </font>
<a href='index.php'>Home</a> |
<a href=''>Subscribers</a> |
<a href=''>Subscriptions</a>
<div id='right'>
<p><a href=''>Log in</a> | <a href='register.php'>Register</a></p></div></div>
</body>
</html>
main.css:
#charset "utf-8";
/* CSS Document */
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
background-color: #093;
border-top-left-radius: 18;
border-top-right-radius: 18;
width: 96%;
height: 58px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 14px;
padding-right: 14px;
color: #FFF;
font-weight: bold;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a {
color: #FFF;
text-decoration: none;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a:hover {
color: #CCC;
}
#header #right {
float: right;
width: 220px;
background-color: #093;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #CCC;
width: 1000;
height: 58px;
margin-left: auto;
margin-right: auto;
padding-top: 14px;
padding-left: 14px;
padding-right: 14px;
padding-bottom: 600;
font-weight: bold;
border-bottom-left-radius: 18;
border-bottom-right-radius: 18;
line-height: 1%;
}
JSFiddle here: http://jsfiddle.net/aKtep/
try adding a <div style='clear:both'></div> right after you close #right and see what happens
A quick solution (assuming I understand your desired result) is to rearrange the elements so the item you want to float to the right is the first in header. Floated elements are removed from the normal flow of the document, and often are pushed to the next line unless they have enough space. However, if the floated element comes first, subsequent elements will arrange themselves around it. See fiddle.
Remove the p tag from around the Login/Register link, modify the #header #right to include a padding-top:10px; You're also using too many divs when you don't really need to (divitus)
You need to specify a width of units for your container #header that will accommodate all of its content.
All I did here was change #header width from 96% to 960px
I guess I'm not 100% sure on what you're asking but it sounds like your normal header is pushing the right header down below it. From what I can see, it may have to do with your header container having a width of 96%. Then the #right #header has a width of pixels and the original header container might not have enough room left for that many pixels. Try changing the width of #header #right to a %
A word of advice, don't use ID's so much. You are creating very high specificity that can be a pain for you later on.
As mentioned before, you should use clear: float after the #right segment.
The reason for this is that the clear property is related directly to the float property. It specifies if an element should be next to the floated elements or if it should move below them. This property applies to both floated and non-floated elements.
Related
This container stubbornly refuses to center. Demo: http://codepen.io/Diego7/pen/KzXgZN
I've tried just about every centering code I can find on the web, to no avail.
Removing width: 90%; from the css aligns the container to the left, even though margin: 0 auto; is telling it to center.
Sorry if this question isn't up to StackOverflow's 'standards', but codingforums.com are down at the moment :(
Thanks heaps!
HTML
<div class="container">
<article>
<header>
<img src="https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png" width="972px"><br />
<h2>Information</h2>
</header>
<p>There's currently is no information available. Sorry.</p>
<footer>
© 2016
</footer>
</article>
</div>
CSS
##import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
}
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
background: #fff;
border-radius: 6px;
box-sizing: container-box;
}
article header h2 {
color: #282828;
font-size: 1.2em;
font-weight: normal;
display:inline;
line-height: 1.3;
}
article p {
font-size: 1em;
display:inline;
line-height: 1.5em;
color: #282828;
max-width: 972px;
}
article footer {
font-size: .9em;
display:inline;
color: #999;
}
a {
color: #2790ae;
text-decoration: none;
outline: none;
}
a:hover {
color: #0f6780;
}
Your .container is already centered: if you change background to red you will see it. And, if you add text-align property its content will be centered too.
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
border-radius: 6px;
box-sizing: container-box;
text-align:center;
background: red;
}
If you make the width a bit narrower (like 70%), you see that it IS centered.
by the way: " list-style:none;" has no effect whatsoever, and "box-sizing: container-box;" should be "box-sizing: content-box;"
Looks like you're centering the <div class="container">, but it doesn't look like it, because you're looking at the image.
If you want the image to take up the entire <div> element (so that any centering takes effect on both), try something like the following, instead of using an <img> element:
div.container {
background-image: url(https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png);
}
There are other properties you can use to fiddle with precisely how the image is displayed. You can find more info here.
If you are using container after float tag. It can create problem sometimes. So to avoiding this user <div class="clear"></div>. Also clear class properties would be:
.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
font-size:0px;
line-height:0px;
float:none;
}
Hope it will be helpful..
I'm trying to make a headers for the chapters in my short story using a collapsible div. I use two different fonts / styles and three layers of divs to make it look the way I want it to. Unfortunately the text is several pixels too low, and it hurts my eyes when I see it.
I know that inline display doesn't really allow for vertical align (my paddings are ignored). I tried using "inline-block" to no avail. I tried top-padding the left ">" symbol, but that makes the entire construction move downwards. I've been hammering at this for the past 2 hours, I give up :D.
Here is my HTML markup as well as the CSS.
<div class="ShortStoryHeaderDiv" onclick="toggleContentDiv('h1','c1');">
<div class="ShortStoryHeaderCenterDiv">
<div id="h1L" class="ShortStoryHeaderDivLeft">></div>
<div class="ShortStoryHeaderText">Must... align... text</div>
<div id="h1R" class="ShortStoryHeaderDivRight"><</div>
</div>
</div>
CSS:
.ShortStoryHeaderDiv
{
margin-top: 1em;
margin-bottom: 1em;
width: 100%;
height: 3em;
text-align: center;
background-color: #DDD;
cursor: pointer;
}
.ShortStoryHeaderCenterDiv
{
padding-top:0.2em;
width: 70%;
margin-left: auto;
margin-right: auto;
}
.ShortStoryHeaderDivLeft
{
display:inline-block;
padding-right: 3em;
font-family: Verdana;
font-weight: bold;
text-shadow: 0 0 4px #555;
color: #000;
font-size: 17pt;
}
.ShortStoryHeaderDivRight
{
display:inline-block;
padding-left: 3em;
font-family: Verdana;
font-weight: bold;
text-shadow: 0 0 4px #555;
color: #000;
font-size: 17pt;
}
.ShortStoryHeaderText
{
display:inline;
font-family: "Times New Roman", Times, serif;
font-size: 1.5em;
text-align: center;
text-decoration: underline;
color: #00F;
}
You could try and use display:table-cell to vertically-align:middle
or set a height and then set the line height to the same.
e.g. height: 40px; line-height:40px;
Managed to make it work by using this in ShortStoryHeaderText CSS class, thanks to SkelDave for reminding me about vertical align. It is awkward that the padding-top ONLY started to work once that vertical-align: top was specified. It is ignored otherwise.
display:inline-block;
padding-top:3px;
vertical-align:top;
I have two labels in the footer of my mobile website. Sometimes the title of the selected product is large and it comes very close to the price as shown below:
THE HTML:
<div style="margin:5px;">
<span class="stickyProductctName">This is a really really really rea</span>
<div class="stickyPrice">$1142.00</div>
</div>
The styles for both the elements are shown below:
#stickyFooter .stickyProductctName {
text-transform: uppercase;
width: 85%;
}
#stickyFooter .stickyPrice {
font-weight: bold;
width: 15%;
float: right;
margin-right: 20px;
}
How can I improve it? Wrap it!
This behavior is because you have a total width of the elements of 100% and a margin-right of 20px. It is overflowing.
put the margin-right on the .stickyProductctName;
add display:inline-block; to .stickyPrice
How bout stack them on top of each other for mobile view?
CSS:
#stickyFooter .stickyProductctName {
text-transform: uppercase;
display: block;
text-align: center;
}
#stickyFooter .stickyPrice {
font-weight: bold;
text-align: center;
}
Here is a JSFiddle.
http://jsfiddle.net/shannabarnard/Ls75o3cr/
Firstly, you need to put both elements in a span, it doesn't work well semantically to have one as a span and the other as a div contained within another div.
Change your widths, and give the price both a left and right padding.
HTML:
<div style="margin:5px;">
<span class="stickyProductctName">This is a really re ally reall yreally really re ally really re reall y really really rereally really really re rea</span>
<span class="stickyPrice">$1142.00</span>
</div>
CSS:
.stickyProductctName {
text-transform: uppercase;
float: left;
display:inline;
width:85%;
}
.stickyPrice {
font-weight: bold;
width: 10%;
float: right;
margin: 0 10px;
}
The mistake is that you used margin instead of padding. As long as border-box is being used (It is standard on frameworks), padding eats the inside of containers instead of adding it. All you need to change is:
#stickyFooter .stickyPrice {
font-weight: bold;
width: 15%;
float: right;
padding-right: 20px;
}
In case you don't have border-box on the site, here is a good article about it. Frameworks usually use a rule like this:
* {
box-sizing: border-box;
}
I have this problem:
http://liberainformazione.it/
Title css rule:
p.right_sidebar_title {
font-size: 16px!important;
font-weight: bold;
color: black;
margin: 7px 0!important;
line-height: 18px!important;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
width: 300px;
}
Blue rectangle css rule:
.post-category-rightSidebar {
background: #369;
display: inline;
float: left;
font-size: 10px;
height: 16px;
line-height: 17px;
margin-right: 5px;
padding: 0 5px;
text-transform: uppercase;
color: white;
}
In Chrome or Firefox the blue rectangle is near the title but with IE the title is on new line.....
I haven't understand why IE not recognize my css rules.
What I am doing wrong?
Thanks a lot.
Your page has <meta http-equiv="X-UA-Compatible" content="IE=7" />, so IE9 is operating as IE7.
In IE7, specifying width or (height) value triggers so called hasLayout which makes element's box somewhat isolated and prevents its contents from being floated by any external elements.
You should either set X-UA-Compatible meta element to IE=edge value (best option), or remove width: 300px; from p.right_sidebar_title rule, or specify this width for a container that contains both p.right_sidebar_title element and floating color square.
I noticed you don't have a float on p.right_sidebar_title, try adding float: left; to that.
If it helps, I'd put p.right_sidebar_title and .post-category-rightSidebar inside their own div:
<div>
<div class="post-category-rightSidebar"></div>
<p class="right_sidebar_title">Title</p>
</div>
Hope this helps!
I'm designing a contact page and would like to have 2 columns, one with a label (e.g. facebook, twitter) and one with the actual details. The thing is I want the two lines (which have text of different size) to both align along the bottom edge.
It's probably easier if I show you: http://goonbee.com/contact
At the moment, the label and details are vertically aligned along the centre. How can I make them align along the bottom?
My CSS is:
#contactbox {
display: block;
margin-top: 25px;
}
#contactboxlabels {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color: #c9c9c9;
line-height: 42px;
text-align: right;
float: left;
padding: 0;
margin: 0;
}
#contactboxdetails {
font-family: Arial, Helvetica, sans-serif;
font-size: 35px;
color: #545454;
line-height: 42px;
text-align: left;
vertical-align: bottom;
float: left;
padding: 0;
margin: 0;
margin-left: 15px;
}
My HTML:
<div id="contactbox">
<div id="contactboxlabels">
<span>email<br />twitter<br />facebook<br />phone</span>
</div>
<div id="contactboxdetails">
<span>x#x.com<br />#goonbee<br />facebook.com/goonbee<br />+44 000000</span>
</div>
<div style="clear:both"></div>
</div>
at the moment you have the labels in one container and the values in another. this will make it harder to work with and is also not semantic and meaningful.
put each label and value in its own container. you'll end up with 4 pairs of label/value.
give the container position:relative; and then use position:absolute; for both the label and value. as long as the bottom for both is 0 then they should both be aligned along the bottom edge.
First, your markup is not very semantic. The keys belong with their values, they are not an independent column. This would be the most semantic, minimal markup:
<dl>
<dt>email</dt> <dd>touch#goonbee.com</dd>
<dt>twitter</dt> <dd>#goonbee</dd>
<dt>facebook</dt> <dd>facebook.com/goonbee</dd>
<dt>phone</dt> <dd>+44 7825 163256</dd>
</dl>
For styling this, the only drawback is that you need to set the width of your dt "column" explicitly in order to get them to line up:
dl { font-family: Arial, Helvetica, sans-serif; }
/* column layout */
dt {
float: left;
clear: left;
width: 4.25em; /* needs to be set for longest item */
margin: 0 1em 0 0;
}
dd {
overflow: hidden; /* creates an implicit column from remaining space */
}
You can then adjust line-height on the dt and add padding-top to keep the heights the same and match up the baselines:
/* typography */
dt {
font-size: 17px;
line-height: 29px; /* 42 - padding-top */
padding-top: 13px; /* ceil( (42 - font-size) / 2 ) */
color: #c9c9c9;
text-align: right;
}
dd {
font-size: 35px;
line-height: 42px;
color: #545454;
text-align: left;
}
Alternatively, if you don't want to set the width of the left column and have it align based on the longest element, like a table column, then use a table! This would give you better control over the vertical-align as well. I don't think a table would be inappropriate here, especially if you mark up the left column as th headers.
<div>
<div style="float: left; width: 75px; text-align: right; padding-right: 10px; padding-top:15px;">email</div>
<div>touch#goonbee.com</div>
</div>
or...
<div>
<span style="vertical-align: bottom; padding-right: 10px;">email</span>
touch#goonbee.com
</div>