I'm having difficulty in placing a div containing contact info in my header. I've been reading up on this issue for a few hours & haven't quite found a solution yet. I'm trying to stack my contact info on the top right of my layout.
--
Image of what I'd like to achieve:
http://i45.tinypic.com/2zrgu8o.jpg
Image of what my code is currently producing:
http://i48.tinypic.com/mbhlcz.jpg
--
My HTML:
<html>
<head>
<link rel="stylesheet" href="/css/header.css" />
</head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" /></head>
<body style="margin:0; padding:0;">
<div id="logo">
<img src="/images/logo-top.png">
</div>
<div class="contact">
Email: sadlkj#yahoo.com | Phone: 1 (732) 235-7239
</div>
<div id="header-bg">
</div>
</body>
</html>
My CSS:
#logo {
postion: fixed;
width: 300px;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
#header-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
background-image: url("/images/header-bg.png");
background-repeat: repeat-x;
z-index: -1;
}
.contact {
float:right;
margin-left:10px;
margin-bottom:10px;}
}
Your help is much appreciated.
I would suggest using a <span> instead of a div, either that or using <div style="display: inline;">
The problem can be solved by putting the contact div BEFORE the logo div in your HTML.
floats only float to the right or the left, not up. The contact div is below the bottom of the logo div and so floats right at that level. By putting it before the logo it floats right before the logo pushes it down.
use this html structure and change your css
<div id="header-bg">
<div class='center_wrap'>
<div id="logo">
<img src="/images/logo-top.png">
</div>
<div class="contact">
Email: sadlkj#yahoo.com | Phone: 1 (732) 235-7239
</div>
</div>
</div>
can't do more luck of time
You've got it all right, you just have a typeo in your class definition. You have to say 0px rather than just 0 for your positioning
top:0px;
left:0px;
Here... take a look: http://jsfiddle.net/t5LZL/2/
Related
hi,
Currently the text is at the top of my website but i want it bottom;
<p style="text-align:relative;">this is best day ever!this is best day ever!this is best day ever!<p>
when i edit it and add text-align:bottom it dosent works!!!!
Try this code :
<html>
<head>
<title>test</title>
</head>
<body>
<div style="position: relative">
<p style="position: fixed; bottom: 0; width:100%; text-align: center"> TEXT YOU WANT
</p>
</div>
</body>
</html>
Try this:
style="position:absolute; bottom:0px;"
Absolutely position the element and set its bottom property to 0.
p{
position: absolute;
bottom: 0;
}
Working Example http://jsfiddle.net/zMKbf/
<p id="Bottom">this is best day ever!this is best day ever!this is best day ever!<p>
and CSS :
#Bottom {
position : absolute;
bottom : 0;
}
Demo
p {
height:200px;
display: table-cell;
vertical-align: bottom;
}
This is a better way...
<html>
<head>
<title>test</title>
</head>
<body>
<div style="display: table;">
<p style="display: table-row;vertical-align: bottom; text-align: center"> TEXT YOU WANT
</p>
</div>
</body>
</html>
i found it in this question, http://stackoverflow.com/questions/526035/how-can-i-position-my-div-at-the-bottom-of-its-container/19110204#19110204
in Hashbrown answer
Below is my code for a simple page. I'm trying to have (A) a banner on the top which consists of a logo, a header to its right and then a "sign in/register" link, (B) below all this then I will have the main text of the site.
I would like a large gap between the main text and banner at the top. So I divide the page up with divs. But when I apply a "margin-top" to #main to keep the banner at a certain distance, EVERYTHING, that is, the main text and everything in my banner all move down the page. Same thing happens if I apply a "margin-bottom" to the header element.
I'm kind of new to CSS and HTML but I though I had the hang of it until this. I've scratched my head for ages about this but I can't seem to understand positioning here at all!
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="utf-8"/>
<title>My Page</title>
</head>
<body>
<header id="masthead" role="banner">
<img src="jep.jpeg" alt="My Page">
<h2>Welcome!</h2>
<p>Sign in Register</p>
</header>
<div id="main" role="main">
<!--main text here -->
</div>
</body>
</html>
Here is the CSS code:
#masthead {
position: relative;
}
#masthead img {
position: absolute;
}
#masthead h2 {
position: absolute;
left: 150px;
}
#masthead p {
position: absolute;
right: 10px;
}
#main {
margin-top: 40px;
}
The problem is that all of the absolute positioning removes the elements from the document flow. That means your header has a height of 0px, but everything is still positioned relative to it.
Just give your masthead a height.
JSFiddle
You just need to wrap your elements in their own containers so you can position them a little bit better. You will probably want to define some heights in this also. Including a height on #masthead
Assuming you need a responsive design:
<header id="masthead" role="banner">
<section class="logo">
<img src="jep.jpeg" alt="My Page">
</section>
<section class="title">
<h2>Journal of Electronic Publishing</h2>
</section>
<section class="sign-in">
Sign in Register
</section>
</header>
.logo {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.title {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.sign-in {
width: 30%;
float: left;
margin-right: 0;
box-sizing: border-box;
}
Note that the total 100% is assuming you include the margins in that calculation. So, 30+30 = 60 + 5 + 5 = 70 + 30 = 100%
Edit: Now that I can see your CSS, your specific issue is the use of position:absolute;. Removing these should get you along the correct path.
I suggest using a table layout. Using 1-row tables for styling is a bit frowned upon by some, but this seems to work:
HTML:
<body>
<header id="masthead" role="banner">
<table>
<tr>
<td><img src="jep.jpeg" alt="My Page"></td>
<td><h2>Welcome!</h2></td>
<td><p>Sign in Register</p></td>
</tr>
</table>
</header>
<div id="main" role="main">
<p>Testing</p>
</div>
</body>
</html>
and CSS:
#masthead {
width: 100%;
}
#masthead table {
width: 100%;
}
#main {
margin-top: 40px;
}
EDIT: Using divs.
This is a bit messy, but it works. It's been a while since I've used div for positioning like this.
HTML:
<body>
<header>
<div class="col">
<div class="content">
<img src="jep.jpeg" alt="My Page">
</div>
<div class="content">
<h2>Welcome!</h2>
</div>
<div class="content">
<p>Sign in Register</p>
</div>
</div>
</header>
<div id="main" role="main">
Testing
</div>
</body>
</html>
CSS:
header {
width: 100%;
}
.col {
height: 100px;
position: relative;
}
.content {
float: left;
width: 33.3%;
}
#main {
margin-top: 50px;
}
Specifially, this code:
<html>
<body style="margin: 0px; padding: 0px">
<div style="width:100%; background-color:#FFDDDD">head</div>
<div style="height:100%; background-color:#DDFFDD">body</div>
</body>
</html>
Is rendered bigger than the window, creating a permanent scrollbar:
What is a proper way to fix this issue?
The problem is that you are making this div 100% height:
<div style="height:100%; background-color:#DDFFDD">body</div>
the height property in % will make the div take up that percentage of its container, which in this case is the HTML <body>, so changing the header div to be height: 10% and the body div to be height: 90% should fix the problem.
You can simply do it this way:
HTML
<div class="header"> Header</div>
<div class="main">Main content area</div>
CSS
body {
background: yellow;
}
.header {
height: 30px;
background: red;
}
Check it out: http://jsfiddle.net/EDWTM/
Move the background color to the body, and lose the height.
<html>
<body style="margin: 0px; padding: 0px; background-color:#DDFFDD">
<div style="width:100%; background-color:#FFDDDD">head</div>
<div>body</div>
</body>
</html>
http://jsfiddle.net/4XVrW/
Alternatively, you could use margins and absolute positioning to place the header above the body:
<html>
<body style="margin: 30px 0 0 0; padding: 0px">
<div style="height: 30px; width:100%; background-color:#FFDDDD; position: absolute; top:0; left: 0;">head</div>
<div style="height:100%; background-color:#DDFFDD;">body</div>
</body>
</html>
I need a way to make a div repeat a certain number (36) of times vertically, with 1px of space between each one. The divs are absolutely positioned, so styling each one individually would be a ton of CSS.
I don't mind putting 36 divs into the HTML directly, although I'd prefer not to, but styling each one would be inefficient.
How about nest them?
you can nest them with relative positioning or maybe some margin: http://jsfiddle.net/zWbUu/
HTML
div id="container">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#container {
position: absolute;
top: -21px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
position: relative;
top: 21px;
}
If you need some content int them, you can use a nested absolute positioned div or this trick: http://jsfiddle.net/zWbUu/1/
HTML:
<div id="container">1 (doesn't apear)
<div class="square">2
<div class="square">3
<div class="square">4
<div class="square">5
<div class="square">6
<div class="square">7</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#container {
position: absolute;
top: -20px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
line-height: 20px;
position: relative;
top: 1px;
color: #fff;
text-align: center;
}
As others have said, you cannot do this using pure HTML or CSS.
If you wanted to do it with PHP, you could do something like this:
Say that your div has a class called "mydiv."
This class should have
Position:absolute Height:10px Width:10px Border-radius:4px
just like you said. In addition to those, add a 1px top margin.
Your CSS should now look kinda like this:
.mydiv {
position:absolute;
height:10px;
width:10px;
border-radius:4px;
margin-top:1px;
}
To make your div repeat, put some code like the following inside your HTML where you want it to go.
<?php
for ($i = 1; $i <= 36; $i++) {
echo "<div class='mydiv'>your div</div>";
}
?>
Like I said, this uses PHP. If you've never used PHP before, then you should check if your webserver supports it. See this for a bit more info on using PHP inside HTML:
http://www.ntchosting.com/php/php-in-html.html
This code probably isn't perfect but I'm sure you'll be able to work with it.
This is not possible with absolute positioning, because as you stated with absolute positioning you must define the coordinates of the objective as it is taken out of the document flow.
You can do this with floats however. Take the following code for example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#holder{
width:15px;
margin: 30px auto;
padding: 1px 1px 0 1px;
clear: both;
}
.box{
width:10px;
height:10px;
margin-bottom: 1px;
background-color: #3F6;
float:left;
}
</style>
</head>
<body>
<div id="holder">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
By making the holder div less than the width of two box divs you force the next box div to appear on a newline below the previous one without giving it an exact positioning value. Then just give it a margin to add the spacing.
The only way you can do this with one div would be to create an image of what the current div looks like, with 1px of whitespace. This way, you can create a fixed width/height div that has the background of the image set to repeat. This will give the illusion you want with only one div.
Otherwise, as already stated, you will need x amount of divs to get the repetition you need. This can be easily achieved using jQuery or something similar but if you really only want one div, then the background-image may be the way to go.
I have a relatively simple design that is puzzling me. It has 4 large images that need to be stuck to the top left, right and bottom left, right corners. The images are quite large and the content container overlaps them. A little something like this:
Structure http://www.kalleload.net/uploads/nizyjc/zxyagpfrmjqe.png
My problem is that my implementation works fine in all major browsers except IE8 (which I was just starting to respect). Is there a better way I can do this?
I'm using the following markup at the moment:
<div class="corner-top">
<div><img src="./images/top-left-corner.png" /></div>
</div>
<div class="corner-bottom">
<img src="./images/bottom-left-corner.png" />
</div>
<div id="container">
....
</div>
#container {
margin: 60px auto;
width: 488px;
}
.corner-top {
background: url('./images/top-right-corner.png') top right no-repeat;
height: 356px;
min-width: 868px;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -20;
}
.corner-top div {
min-width: 868px;
}
.corner-bottom {
background: url('./images/bottom-right-corner.png') bottom right no-repeat;
bottom: 0;
height: 325px;
min-width: 868px;
overflow: hidden;
position: absolute;
width: 100%;
z-index: -20;
}
.corner-bottom div {
min-width: 868px;
}
There are many approaches to rounded corners (basically the same). I think the most comfortable one to have four divs in each other:
<div id="container" class="topleft">
<div class="topright">
<div class="bottomleft">
<div class="bottomright">
<!-- content -->
</div>
</div>
</div>
</div>
Another advantage is that you don't need the <img> tags.
you could try forcing IE8 into IE7 compatablity mode.
stick
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
in your <head>