How do I make a header cover the contents and span the entire page length? When I use this css
#header {
display: inline-block;
background-color: #015367;
}
#login {
color: #b92c2c;
font-size: 1.25em;
margin-left: 18em;
position: relative;
top: 16px;
text-decoration: none;
}
#search-form {
margin-left: 0.5em;
margin-right: 15em;
position: relative;
top: 18px;
}
.lfloat {
float: left;
}
.rfloat {
float: right;
}
with this html
<body>
<div id="header">
<div id="page-nav" class="rfloat">
<a id="login" class="lfloat" href="/login">login</a>
<form id="search-form" class="rfloat" action="search.py" method="get">
<input id="searchbox" type="text" name="q" placeholder="search"/>
</form>
</div>
</div>
</body>
I get this result (in firefox)
What do I need to change to get a proper header (like stackoverflow, facebook, etc)?
Since you used float for the elements inside #header, then you only need to add this.
#header {
background-color: #015367;
overflow:hidden;
}
Before overflow:hidden
Notice the black border, the #header isn't wrapping the contents.
After overflow:hidden
Check it out : http://jsfiddle.net/AliBassam/vpRc2/
Adjust the top so that elements are positioned the way you like, position:relative; has no use here, just use floats and margins.
Add this to your CSS to zero out the margin on the body:
body {
margin: 0;
}
See DEMO.
I would also suggest you remove your position and top properties from #login and #search-form, and use margin to position them instead.
inline-block ??
#header {
float:left;
width:100%;
clear:both;
}
I suspect you are trying to just extend the header box to contain the login form.
The effect you are experiencing is due to the use of floating elements in the header tag. Floated elements are taken out of the normal flow of the document, this is why the parent element cannot detect their actual occupation of space.
There is an easy fix to this just add a overflow:hidden; to the style of header div. This would fix the problem but it is not considered to be the right way to do it. The overflow is not meant to be used in such a manner. Instead my advice to you is to use the "clearfix" method.
Here is link for the actual code: http://www.webtoolkit.info/css-clearfix.html
All you have to do is to add this code as a class to the header element.
I hope this helps :)
Related
I am trying to put a <p> tag inline with an <a> tag, but I can't figure out how. I've tried several display types in css, but they either don't work or do something weird to it.
(Here is a bunch of unnecessary words because the thing is saying there is too much code and not enough words. I think its pretty dumb because what I said is enough unless someone specifically asks for details about something).
Here's some example code:
body {
margin: 0;
padding: 0;
background-color: #efefef;
}
header {
margin: 0;
margin-top: -10px;
background-color: #ffffff;
}
header p {
margin: 0;
font-family: "arial";
font-size: 50px;
color: #3c3c3c;
margin-top: 10px;
margin-left: 10px;
text-align: center;
}
header a {
}
#information {
width: 500px;
height: 250px;
background-color: #ffffff;
box-shadow: 7px 7px 4px grey;
margin-left: 100px;
margin-top: 150px;
}
#information p {
font-family: "arial";
font-size: 20px;
color: #1febff;
}
#delete {
margin-top: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<title>SaHa | Color Scheme</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<p>SaHa</p>
Menu
</header>
<div id="information">
<p>Pretend that there is a bunch of important information here even though there really isn't.
This is normally where a message that actually means something would go, but this is just a
placeholder because I have nothing important to put here right now.
</p>
</div>
<div id="delete"></div>
</body>
</html>
In your HTML, try directly typing or after whatever text you want it to appear.
For example:<div>When i came<a> ut yiur name</a>so what do i do</div>
In your CSS body, try inline-block or just inline parameters with DISPLAY property to get any image or text into the normal flow of a line.
For example:
a {display:inline-block;}
Could you specify which elements in your example code you want inline?
Generally using display: inline and display: inline-block will make elements flow as if they were text. They will sit next to each other and jump to new lines when their container width gets too narrow. Browsers commonly apply display: block to <p> elements by default.
Assuming we are talking about the contents of your <header>, I added the following rule to your existing CSS. Check it out in action.
header p {
display: inline-block;
}
EDIT: Based on further comments, here is a solution to what you are looking for.
First of all I've wrapped your menu items in a nav element and made your main title a h1 element. Search engines like this better. A h1 element is also displayed inline by default and respects text-align properties on its parent container (which in this case is header).
<h1>SaHa</h1>
<nav>
Menu
Thing
Stuff
</nav>
On the CSS side I've made two crucial changes.
First, I've center-aligned your header text. This centers the new h1 element. Additionally I've set position: relative because we will need it in the next step.
header {
text-align: center;
position: relative;
}
Second, to position your menu to the right side of the screen I've lifted it from the regular flow of content with position: absolute. Now, by specifying either a top or bottom and left or right, we can position the menu anywhere in the header. Why the header? Because it is the nearest parent to nav that has a relative position. This is why we set it earlier!
nav {
position: absolute;
right: 10px;
bottom: 10px;
}
Try changing the values for right and bottom in this Codepen example. Try changing right to left and see what happens. What happens if you remove position: relative from .header?
I have a use case whereby I want to draw rectangles in CSS. I need them to look like this:
I've managed to get the smaller and taller boxes drawn but can't work out how to draw those that drop below the line. Here's a fiddle
Heres' my HTML:
<div class="word">
<p class="letter taller"></p>
<p class="letter"></p>
<p class="letter"></p>
<p class="letter hanging"></p>
<p class="letter"></p>
<p class="letter taller"></p>
<p class="letter"></p>
</div>
Here's my CSS so far:
p {
display: inline-block;
}
.letter {
padding 1.618em;
border-width: 1px;
border-style: solid;
width: 2em;
height: 2em;
}
.taller {
height: 4em;
}
.hanging {
/* not sure what to implement here */
}
Using margins may affect other elements, especially if you plan on including other content on your page. (See this) I'd recommend using position: relative combined with top: 2em. What that does is it pushes the element down 2em, relative to the original position of the element.
.hanging {
height: 4em;
position: relative;
top: 2em;
}
http://jsfiddle.net/WtuyL/6/
(On an unrelated note... here's a little bonus if you want to fully imitate the image and remove whitespace. You'll net to set a manual size to all <p> elements though.)
The simplest way is to use a negative margin-bottom to achieve this (you don't need to use positioning):
CSS:
.hanging {
margin-bottom: -16px;
height:4em;
}
JSFiddle
Note: also comment the whitespace between display:inline-block elements to remove it.
Reference - see this to see more hacks how to remove the whitespace between display:inline-block elements.
Try this.
.hanging {
height:4em;
margin-bottom:-1em;
}
I have 4 buttons in a header div. I have placed them all using margins top and left in css so they are all next to each other in one line. Nothing fancy.
Now I'm trying to do an action when the button is pressed the button text moves down a little bit.
I'm using this code in CSS :
#btnhome:active{
line-height : 25px;
}
HTML :
<div id="header">
<button id="btnhome">Home</button>
<button id="btnabout">About</button>
<button id="btncontact">Contact</button>
<button id="btnsup">Help Us</button>
</div>
Button CSS example :
#btnhome {
margin-left: 121px;
margin-top: 1px;
width: 84px;
height: 45px;
background: transparent;
border: none;
color: white;
font-size:14px;
font-weight:700;
}
Also those buttons work on a header background, I'm sure it has something to do with these settings :
#header {
background-image: url(images/navbar588.png);
height: 48px;
width: 588px;
margin: 2em auto;
}
It works well but the only problem is that the all other buttons also move their text down? Why Is that? Aren't I clearly clarifying that I want to use #btnhome only? All the buttons have completely different ID's. All buttons have the same CSS settings except the margins. What do I need to edit?
Thank you very much.
as I expected, yeah, it's because the whole DOM element is being pushed down. You have multiple options. You can put the buttons in separate divs, and float them so that they don't affect each other. the simpler solution is to just set the :active button to position:relative; and use top instead of margin or line-height. example fiddle: http://jsfiddle.net/5CZRP/
try changing that line-height change to a margin-top or padding-top change instead
#btnhome:active{
margin-top : 25px;
}
Edit:
You could also try adding a span inside the button
<div id="header">
<button id="btnhome"><span>Home</span></button>
<button id="btnabout">About</button>
<button id="btncontact">Contact</button>
<button id="btnsup">Help Us</button>
</div>
Then style that
#btnhome span:active { padding-top:25px;}
Use margins instead of line-height and then apply float to the buttons. By default they are displaying as inline-block, so when one is pushed down the hole line is pushed down with him. Float fixes this:
#header button {
float:left;
}
Here's a working jsfidle.
[type=submit]{
margin-left: 121px;
margin-top: 19px;
width: 84px;
height: 40px;
font-size:14px;
font-weight:700;
}
I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code
<html><body>My Text<hr/></body></html>
It seems that <hr> is not an option because it is always on a new line and I'd like the line to start at the right of my text.
Any help ?
The <hr> has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr> is in essence nothing more than an empty <div> with a default border setting.
To demonstrate this, try the following:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
There are a number of ways to override the styling of <hr> to acheive your aim.
You could try using display:inline-block; along with a width setting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div> that has overflow:hidden; might do the trick, for example:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that float tends to cause more problems than it solves. But try it and see if it works for you.
There are various other combinations of styles you can try - give it a go and see what works.
Using FlexBox Property this can be achieved easily.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}
<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div>
Try this:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
The inline CSS float: right will keep it on the same line as the text.
You'll need to adjust the width if you want it to fill the rest of the line.
Using inline or float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
Demo http://jsfiddle.net/mFEWk/
What I did, is to add position relative in both elements (to give me the advantage of z-index use). Also from the moment I had position:relative for hr I moved it from the bottom:17px. This move it above the div that contains the text. Applying z-index values and adding background:white for the div puts the text above the the line. Of course don't forget to use a width for the text, otherwise will take the whole width of the parent element.
<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">
Exactly what you want.
Try this. It works
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
You can also use this to draw a line between texts like
Hello -------------------------- Hello
The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.
Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
Style Div for Line After Text
Hope that helps anyone who had the same goal as me.
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
That sort of make sense?
<p>My text</p>
<hr />
Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
I used the following technique:
Give the container div a background-image with a horizontal line.
Put an element (like <h3>) in the container div (I have it on the right so float: right; )
Use the following css:
.line-container {
width: 550px;
height: 40px;
margin-top: 10px;
background-image: url("/images/horizontal_line.png");
}
.line-container h3 {
padding-left: 10px;
float: right;
background-color: white;
}
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">
I'd like all my content to flow around an image. To do this, I simply did
img#me {
width: 300px;
float: left;
margin-right: 30px;
}
This works for text wraping, but other elements go behind it. For example
<style>
h2 {
background: black;
color: white;
}
</style>
<img id="me" src="http://paultarjan.com/paul.jpg" />
<h2>Things!</h2>
Then the h2 background flows right past the 30px margin. How should I do this instead?
I wish I could explain why exactly, but
h2 {
...
overflow: hidden;
...
}
should fix your problem.
I'm not sure I understand the problem, but I'm pretty sure it comes from the h2 being a block element. If it works for you, the easiest cure would be making it display: inline. Otherwise, give the h2 a specific width, and a float: left, as well.