Basically, I have a navigation bar in my website. In the centre of the nav bar, I want my website's name centred. This was easy of course, but now I want my website's logo positioned to the left of it. Float: left does not work, as this simply puts the logo on the far left of the nav bar.
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
}
#name {
text-align: center;
position: relative;
}
#top-left {
position: relative;
float: left;
border: 1px solid black;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name">champion</h1>
</div>
</body>
</html>
You can do this trick:
<table style="background-color:Gray; width:100%;" >
<tr>
<td style="text-align:right; width:45%">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
</td>
<td style="text-align:left; width:30%"">
<h1 id="name">champion</h1>
</td>
<td style="text-align:right; width:25%;">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
</td>
</tr>
<tr style="text-align:right;">
<td colspan="3">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
</td>
</tr>
</table>
I have it running here where the float: left appears to be working. I'm guessing there may be something I'm missing. Could you put a jsfiddle or show a live example by chance.
Here's what I see
You can do something like this. It uses :before to attach the logo to the heading text: http://codepen.io/pageaffairs/pen/bchLo
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
text-align: center;
}
#name {
line-height: 56px;
position: absolute;
width: 100%;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
h1 span {
position: relative;
display: inline-block;
padding: 0 20px;
}
h1 span:before {
content: "";
width: 109px;
height: 56px;
background: url(http://www.webmasterworld.com/gfx/logo.png);
position: absolute;
top: 0;
right: 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name"><span>champion</span></h1>
</div>
</body>
</html>
Related
I am having difficulty jumping to a section on the same page using
ahref and aname. I am making the buttons the link to a specific div further down the page. While clicking on the link makes it go to the right div, it does jumps a few lines into their respective divs, while I would like it to show the top of the div. I would appreciate any help solving this problem.
Here is the html (the href tags are in class navrow):
<div class="header">
<br>
<br>
<h1>Learn More About Charles Guthrite</h1>
<p></p>
<div class="navrow">
<table>
<tr>
<td><button>About Me</button></td>
<td><button>Work Samples</button></td>
<td><button>Resume</button></td>
<td><button>Blog</button></td>
<td><button>Contact</button></td>
</tr>
</table>
</div>
</div>
<div id="AboutPictures">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQguaNQJU2J-h8TmbEVIpqDdp0blsw2i7dESDKllu_XnhdQ8Lv71_eOu-g">
<h3>Charles Guthrite is a Northwestern University senior majoring in Journalism. He is addicted to sports, YouTube, and quality journalism. Charles's favorite publications include the Wall Street Journal, Daily Northwestern and New York Times. You can often find him in the gym, coding, or watching NFL or NBA games. <h3>
</div>
<div class="samples">
<table>
<th>Pokemon</th>
<tr>
<td>
<p>Squirtle is an amphibion Pokemon. He can shoot water and hide in his shell</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png">
</td>
</tr>
<tr>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440">
</td>
<td>
<p>Hello Charzard</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849">
</td>
</tr>
</table>
<div class="resume"><a NAME="resume"></a>Resume Page</div>
<a NAME="blog">
<div class="blog">Blog Page</div>
<a NAME="contact">
<div class="contacts">Contact Page</div>
</div>
</body>
</html>
Here is the CSS in case you need it:
html, body{
font-family: 'Lato', sans-serif;
width: 100%;
padding: 0;
margin: 0;
}
p{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
h1{
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.header{
position: fixed;
z-index: 20;
width: 100%;
background-color: black;
text-align: center;
}
.navrow{
background-color: white;
height: 50px;
width: 100%;
}
.navrow table td{
padding-left: 150px;
}
button{
padding: 10px;
font-family: Helvetica, Arial, sans-serif;
}
.aboutpage h1{
color:red;
}
.samples {
float: left;
height: 70%;
width: 100%;
}
.resume {
float: left;
width: 100%;
height: 900%;
background-color: rgb(0,300,200);
}
.blog {
float: left;
width: 100%;
height: 80%;
background-color: rgb(0,300,150);
}
.contacts {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
#AboutPictures {
margin-top: 170px;
float: right;
background-color: rgb(0,200,255);
}
#AboutPictures h3{
margin-left: 20px;
}
img[src*="tumblr"]{
height:360px;
width:40%;
float: right;
top: 10px;
padding:0 0 0 0;
}
.biopage {
position:relative;
}
.samples table{
position: relative;
width: 100%;
}
.samples td{
text-align: center;
width: 30%;
height:300px;
position:relative;
table-layout: fixed;
background-color: rgb(0,300,300);
}
.samples td img{
width: 290px;
height:290px;
z-index: 0;
}
.samples td:hover img{
opacity: .5;
}
.samples p{
margin: 0;
position:absolute;
left: 0;
top: 50%;
right:0;
z-index: 10;
color: #fff;
font-size: 20px;
text-align: center;
}
.samples td:hover p{
visibility: visible;
}
.samples td p{
visibility: hidden;
}
.container{
background color: white;
width: 25%;
float: right;
}
.container img{
width: 100%;
}
It can be helpful to place the named anchors above the area you want to move to rather than within it.
I would propose:
<a NAME="resumelnk"></a>
<div class="resume">Resume Page</div>
<a NAME="bloglnk"></a>
<div class="blog">Blog Page</div>
<a NAME="contactlnk"></a>
<div class="contacts">Contact Page</div>
And possibly correct your HTML markup to include the closing anchor tags (</a>) which appear to be missing.
One final thought is to not name anchors the same as a class. Not that this is specifically a problem. But I tend to use class names for classes and not for other elements on a page.
The result you are getting is partly a matter of not enough web page content below the targets - - the browser simply can't scroll any lower (which would bring your content to the top of the browser) because the page content is finished.
Also, your targets are inside of the sections you want to target. Target the div's, not anchors within the div's.
Another issue is that you haven't closed your <a> elements for the targets.
Also, you don't really need buttons to accomplish what you want.
Here's some updated code that (just for demonstration) adds a bottom margin to your samples div so that the bottom targets have more room to move up the page. This is just for demonstration, it's not considered a best practice.:
.button { border:1px solid grey; border-radius:1px; background-color:#e0e0e0; text-decoration:none; padding:2px; color:#000; }
.button:active {border:1px solid black; }
.samples {margin-bottom:300px;}
<div class="header">
<br>
<br>
<h1>Learn More About Charles Guthrite</h1>
<p></p>
<div class="navrow">
<table>
<tr>
<td>About Me</td>
<td>Work Samples</td>
<td>Resume</td>
<td>Blog</td>
<td>Contact</td>
</tr>
</table>
</div>
</div>
<div id="AboutPictures">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQguaNQJU2J-h8TmbEVIpqDdp0blsw2i7dESDKllu_XnhdQ8Lv71_eOu-g">
<h3>Charles Guthrite is a Northwestern University senior majoring in Journalism. He is addicted to sports, YouTube, and quality journalism. Charles's favorite publications include the Wall Street Journal, Daily Northwestern and New York Times. You can often find him in the gym, coding, or watching NFL or NBA games. <h3>
</div>
<div class="samples">
<table>
<th>Pokemon</th>
<tr>
<td>
<p>Squirtle is an amphibion Pokemon. He can shoot water and hide in his shell</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png">
</td>
</tr>
<tr>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440">
</td>
<td>
<p>Hello Charzard</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849">
</td>
</tr>
</table>
<div class="resume" id="resume">Resume Page</div>
<div class="blog" id="blog">Blog Page</div>
<div class="contacts" id="contact">Contact Page</div>
</div>
You can provide a little css to your anchor targets to compensate for fixed position headers:
a.anchor{
display:block;
position: relative;
top: -150px;
visibility: hidden;
}
your example with slight tweak
I have an image and text next to each other in a div. I'm trying to align the text vertically aligned in the middle, but it stays on top. Please help!
http://jsfiddle.net/9KDva/
HTML:
<div class="title-block">
<div class="img-holder"><img width="101" height="104" src="http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg" class="attachment-homepoststhumbnail wp-post-image" alt="url-16" /></div>
<div class="title">Get Your Nose Out of Your IPhone</div>
</div>
CSS:
.title-block {
width:272px;
height: 110px;
vertical-align:middle;
}
.img-holder {
float: left;
margin: 0 6px 0 0;
position: relative;
}
.img-holder img {
display: block;
}
.title {
display:block;
text-transform: uppercase;
margin: 8px 0 9px;
}
You can use table and table-cell: And move your class='title' inside img-holder
Fiddle
With padding left away from image - fiddle
.title-block {
width:272px;
height: 110px;
}
.img-holder {
margin: 0 6px 0 0;
position: relative;
display: table;
}
img, .title{
display:table-cell;
vertical-align: middle;
}
.title {
text-transform: uppercase;
margin: 8px 0 9px;
}
I changed your div to span for vertical-align: middle to work.
See Fiddle: http://jsfiddle.net/9KDva/4/
CSS:
.vam {
vertical-align: middle;
}
span.vam {
display: inline-block;
}
HTML:
<div class="title-block">
<span class="img-holder vam">
<img width="101" height="104" src="http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg" class="attachment-homepoststhumbnail wp-post-image" alt="url-16" /></span>
<span class="title vam">Get Your Nose Out of Your IPhone</span>
</div>
Using vertical-align: middle won't work on a div.
Something like this might work:
<table class="title-block" style="background-image:url('http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg); background-size: cover; background-position: center center;">
<tr>
<td class="title" style="vertical-align: middle;">
Get Your Nose Out of Your IPhone
</td>
</tr>
</table>
I am trying to push the footer in to down when the content page height increase.but I am not able to do that. footer is always stick with side bar.because of this my content page overflow over the footer .
My css code is below:
#header
{
height: 150px;
background-color: #375BB0;
}
#nav
{
**strong text**height: 100%;
width: 231px;
float: left;
}
#nav2
{
height: 100%;
width: 250px;
float: right;
}
#content
{
height: 100%;
bottom: 0;
}
#footer
{
clear: both;
height: 50px;
background-color: #CCCCCC;
color: #333333;
text-align: center;
}
My markup code:
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="nav">
<table class="style1" style="width: 100%; position: static ;" >
</table>
</div>
<div id="nav2">
<table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" >
</table>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" style="clear: both; height:500px;" >
Copy rihgt # xyzoman.com
</div>
</div>
</form>
Please help me
Try this, I changed 2 things. First, you were making the height of elements at 100% to an element that was 100% to the page, so they would never line up unless the content was bigger than the page, and 2, I made the content display: inline block; so that your menus would be on either side and not just on teh side and then to wrap around the content, but you can change this back if you wanted.. But your main main main issue was the height 100% in the nav css tags!
Everything else stayed the same.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header
{
height: 150px;
background-color: #375BB0;
}
#nav
{
width: 231px;
float: left;
}
#nav2
{
width: 250px;
float: right;
}
#content
{
display:inline-block;
height: 100%;
bottomL 0;
}
#footer {
display:block;
bottom: 0;
height: 50px;
background-color: #CCCCCC;
color: #333333;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="nav">
<table class="style1" style="width: 100%; position: static ;" >
<tr><td>Table</tr>
</table>
</div>
<div id="nav2">
<table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" >
<tr><td>Table</tr>
</table>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" style="clear: both; height:500px;" >
Copy rihgt # xyzoman.com
</div>
</div>
</form>
</body>
</html>
If I large my browser then my div header width don’t show 100%. But I set my div header width 100%. Please can someone point out what I may be doing wrong here? Many thanks. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
<link rel="shortcut icon" href="image/icon.ico" >
<link rel="StyleSheet" href="style/login.css" type="text/css"/>
</head>
<body>
<div id="header">
<div id="header_contain">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" style="font-size: 18pt; font-weight: bold">Hello</td>
<td width="50%" align="right" style="font-size: 18pt; font-weight: bold">What's Up!</td>
</tr>
</table>
</div>
</div>
</body>
</html>
css code
body
{
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
}
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
You would need to set every element above the <div> to 100% width, including the <html> tag.
I have edited my code and its tested.
HTML Code:
<div id="header" style="width:1500px;">
<div id="header_contain" style="min-width:980px;">
<table>
<tr>
<td>
<div style="width:500px;">
Hie, Div1 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div2 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div3 Content Here.!!
</div>
</td>
</tr>
</table>
</div>
</div>
CSS Code..something like this.
html, body
{
height: 100%;
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
overflow:auto;
}
#header
{
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
If It will helps you then don't forget to improve your accept rates. Cheers. !!
#header
width: 100%;
height: 85px;
background: #006666;
position:fixed;
z-index:999;
top:0;}
I use same color on header_contain div that I have already used in head div and this way I solve this problem.
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: 85px;
background: #006666;
margin: 0px auto;
padding-top: 30px;
}
pxI created a style defenition like this:
#container {
width: 900px;
margin: 0 auto;
background-image:url(images/back.JPG);
}
#header {
width: 900px;
height: 200px;
background-image:url(images/logo2.jpg);
border-bottom: 2px solid #000;
}
#leftnav {
float:left;
width: 150px;
height: 500px;
}
#rightnav {
float:right;
width: 150px;
height: 500px;
}
#body {
margin-left: 150px;
width: 600px;
text-align:center;
background-image:url(images/tb.png);
}
#footer {
clear:both;
background-image:url(images/tb.png);
}
Then I created a index file like that used the container around everything, then put the header, then leftnav, then rightnav, then body, then footer.
This works greate on Chrome and firefox, but on IE, the "BODY" container is not where it is supposed to be, it starts under the "leftnav" container. Is there a simple fix for this?
Updated cod from first answer, still same problem.
My index file is a php file.
You don't have units defined on #body's width. Should be width: 600px;
Also, remove margin-left: 150;
Try this. It works in IE7 for me. I think you were just missing a doctype.
<!DOCTYPE html>
<html>
<head>
<title>Test for StackOverflow</title>
<style>
#container {
width: 900px;
margin: 0 auto;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/back.JPG);
}
#header {
width: 900px;
height: 200px;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/logo2.jpg);
border-bottom: 2px solid #000;
}
#leftnav {
float:left;
width: 150px;
height: 500px;
}
#rightnav {
float:right;
width: 150px;
height: 500px;
}
#body {
margin-left: 150px;
width: 600px;
text-align:center;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/tb.png);
}
#footer {
clear:both;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/tb.png);
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="leftnav">
<img src="http://www.uffdarc.com/cantonspeedway/images/p1.jpg" width="140" height="140"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p2.jpg" width="140" height="140"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p6.jpg" width="140" height="80"><br>
</div>
<div id="rightnav">
<img src="http://www.uffdarc.com/cantonspeedway/images/p3.jpg" width="140" height="80"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p4.jpg" width="140" height="80"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p5.jpg" width="140" height="80"><br>
</div>
<div id="body"> This Page is still under construction <br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/logo3.jpg" width="550" height="362"> <br>
<br>
</div>
<div id="footer">
</div>
</div>
</body>
</html>