I'm making a website and in the header I need a logo and a horizontal set of links. The logo must be on the left and the links must be on the right. The problem I'm running into is that if I add too many links to the list, it will wrap to the next line, but I need it to be closely attached to the right side of the page. Both the banner and the list of links are in the header. My CSS is as follows.
header{
width:100%;
height:10%;
background-color:#AC222A;
color:white;
}
links{
position: relative;
height: 10;
width: 10%;
float: right;
top: 35%;
display: inline;
}
banner{
position: absolute;
padding: 1%
left: 1%;
height; 10;
width: 15%
float: left;
}
And the HTML is as follows:
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<div id="header">
<div id = "banner">
<img src="pictures/logo_logo.png">
</div>
<div id = "links">
home
|
About
|
Contact Us
</div>
</div>
<body>
</body>
</html>
It's missing the # on the id names in the CSS. In fact the whole layout can be done with a simple float, so move links before banner in the HTML.
#header {
background-color:#AC222A;
color:white;
}
#links {
float:right;
}
<div id="header">
<div id="links">
home | About | Contact Us
</div>
<div id="banner">
<img src="pictures/logo_logo.png"/>
</div>
</div>
Edit: (transferring the comments into this) - to fix the problem based on your existing code, you have #links{width:10%;} set there, just remove that.
After taking out the Width attribute, the link menu shows up nicely formatted with no problems.
Related
So what I'm trying to do is create a mock up for my own little website in HTML. So everything been going good until just now. What I want to do is display an image and then a title and description next to it, sort of like what youtube does.
Example:
So the way I have it right now it works perfectly if the text doesn't have to drop down to a new line.
Example of it working:
However, if one of them is too long, everything gets messed up, example of messed up:
I set up a JS fiddle to make it easier for you guys. However remember I'm designing with bootstrap so the reason the CSS is so long is because it includes the full bootstrap, however only the first 57 lines is my custom written css. Anyway, if anyone could help me so that when my title or my description is too long it will drop onto the next line like youtube does.
My HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<title>Comments</title>
</head>
<body>
<div class="logo">
<img height="70" width="200" src="/img/logo.png">
</div>
<div class="container">
<div class="leftBar">
<div class="well">
<div class="title">
<h3>Mini Title</h3>
</div>
<hr/>
<div class="contentLink">
<div class="smallContentImage">
<img src="http://i.imgur.com/zesaMhG.gif">
</div>
<div class="smallContentText">
<h5>Title Goes Here</h5>
<em>
Other Informati
</em>
</div>
</div>
</div>
</div>
<div class="rightBox">
<div class="well">
<div class="title">
<h1>Title For Content</h1>
</div>
<p> CONTENT CONTENT CONTENT </p>
</div>
</div>
</div>
</body>
</html>
MY CSS
body {
background #FAFAFA;
}
.title {
text-align: center;
}
.logo {
margin-right: auto;
margin-left: 2%;
padding-top: 2%;
}
.leftBar
{
margin-right: auto;
float: left;
width: 30%;
overflow: hidden;
}
.rightBox
{
margin-left: 0;
float: right;
width: 70%;
}
.contentLink
{
padding-left: 1%;
padding-right: 1%;
width: auto;
height: auto;
}
.smallContentImage {
width: 100px;
height: 100px;
margin-left: 0;
margin-right: auto;
float:left;
}
.smallContentText {
float: right;
width: auto;
margin-left: auto;
margin-right: 0;
width: fixed;
}
JS Fiddle: http://jsfiddle.net/BjSv8/
Thank you
There is no such thing as width:fixed. You need to make sure the widths of the two content items add up to the width of the parent.
Is there any reason you used em instead of div.
If you could use 'div' instead of 'em' and define the width , then your problem could be solved.
<div style="word-wrap:break-word;border:1px solid red; width:100px">
Other Information goes here
</div>
See this fiddle: http://jsfiddle.net/BjSv8/1/
I want to create my first web page but I encountered a problem.
I have the following code:
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
I'd like to know how to make the logo and the H1 to be in the same line.
Thanks!
As example (DEMO):
HTML:
<div class="header">
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
</div>
CSS:
.header img {
float: left;
width: 100px;
height: 100px;
background: #555;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
DEMO
Try this:
Put both elements in a container DIV.
Give that container the property overflow:auto
Float both elements to the left using float:left
Give the H1 a width so that it doesn't take up the full width of it's parent container.
If your image is part of the logo why not do this:
<h1><img src="img/logo.png" alt="logo" /> My website name</h1>
Use CSS to style it better.
And it is also best practice to make your logo a hyperlink that take the user back to the home page.
So you could do:
<h1 id="logo"><img src="img/logo.png" alt="logo" /> My website name</h1>
Try this:
<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
Just stick the img tag inside the h1 tag as part of the content.
you can do this by using just one line code..
<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
You can do it as Billy Moat told you, wrap your <img> and <h1> in a <div> and use float: left; to float your image to the left, set the <div> width and than set a line-height for your h1 and use <div style="clear: float;"></div> to clear your floating elements.
Fiddle
I'd use bootstrap and set the html as:
<div class="row">
<div class="col-md-4">
<img src="img/logo.png" alt="logo" />
</div>
<div class="col-md-8">
<h1>My website name</h1>
</div>
</div>
This is my code without any div within the header tag. My goal/intention is to implement the same behavior with minimal HTML tags and CSS style. It works.
whois.css
.header-img {
height: 9%;
width: 15%;
}
header {
background: dodgerblue;
}
header h1 {
display: inline;
}
whois.html
<!DOCTYPE html>
<head>
<title> Javapedia.net WHOIS Lookup </title>
<link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
<header>
<img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
<h1>WHOIS Lookup</h1>
</header>
</body>
output:
in your css file do img { float: left; } and h1 {float: left; }
Check this.
.header{width:100%;
}
.header img{ width: 20%; //or whatever width you like to have
}
.header h1{
display:inline; //It will take rest of space which left by logo.
}
<head>
<style>
header{
color: #f4f4f4;
background-image: url("header-background.jpeg");
}
header img{
float: left;
display: inline-block;
}
header h1{
font-size: 40px;
color: #f4f4f4;
display: inline-block;
position: relative;
padding: 20px 20px 0 0;
display: inline-block;
}
</style></head>
<header>
<a href="index.html">
<img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
<a href="index.html">
<h1><span> Technocrat</span> Blog</h1></a>
</div></header>
Steps:
Surround both the elements with a container div.
Add overflow:auto to container div.
Add float:left to the first element.
Add position:relative; top: 0.2em; left: 24em to the second element (Top and left values can vary according to you).
I'm currently working on a new website: http://maartenlodewijk.nl/2013/
The light-grey bar on the right side (with the word "test" in it) is supposed to be my nav bar. I've been trying for days to get its height to fill the page height (not just browser height, but the entire page). Just as in this mockup I've made: http://i.imgur.com/Knjlc.jpg
I've tried multiple ways now, from simple ones such as setting body and html height to 100% (No luck there) and a CSS hack such as here: ejeliot.com/samples/equal-height-columns/example-7.html (Which works, but a hack is really a last-resort option for me)
Here is my HTML and CSS code. In case youre wondering: Yes, I have both a wrapper and a container div, the wrapper centers the container, while the container maintains a fixed position within the wrapper.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maarten Lodewijk // Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navigation">
test
</div> <!-- end navigation -->
<div id="wrapper">
<div id="container">
<div id="header">
<img src="images/headerpng.png" alt="Logo" border="0" />
</div> <!-- header -->
<div id="weclome">
<img src="images/homemessagepng.png" width="645" height="203" alt="Maarten Lodewijk, Communication & Multimedia Designer" /></div><!-- end welcome -->
<div id="content">
<div id="leftcolumn">
<h1>HEADER</h1>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
</div><!-- end leftcolumn -->
<div id="rightcolumn">
<h1>Contact</h1>
<table width="286" border=0>
<tbody>
<tr>
<td width="96">Mail:</td>
<td width="180" class="rightalign">mail#maartenlodewijk.nl</td>
</tr>
<tr>
<td>Telefoon:</td>
<td class="rightalign">+31 6 348 268 52</td>
</tr>
</tbody>
</table>
<h1>HEADER</h1>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
</div><!-- end rightcolumn -->
</div> <!-- end content -->
</div> <!-- end container -->
</div> <!-- end wrapper -->
</body>
</html>
CSS
/* ----- TAGS -------*/
body {
font-size: 100%;
padding: 0px;
margin: 0px;
font-family: Georgia, "Times New Roman", serif;
background: #e8e8eb url(images/bg.png) repeat-y;
color: #666666;
}
html{
}
h1{
font-size: 150%;
color: #ff3366;
padding-top:30px;
}
/* ----- LAY OUT -----*/
#wrapper{
width:955px;
margin-left:auto;
margin-right:auto;
}
#container{
width:645px;
margin-left:20px;
}
#content{
padding: 0px 20px 0px 20px;
}
#navigation{
position:absolute;
top:0;
right:0;
width: 16%;
min-width: 163px;
max-width:233;
background-image:url(images/navbarbg.jpg);
height: 100%;
}
#leftcolumn{
width:286px;
float:left;
}
#rightcolumn{
width:286px;
float:right;
}
/* ----- CLASSES -----*/
.rightalign{
text-align:right;
}
If i saw your layout so it's good if you give position:fixed instead of position:absolute; to your #navigation DIV. Write like this:
#navigation{
position:fixed;
top:0;
right:0;
width: 16%;
min-width: 163px;
max-width:233;
background-image:url(images/navbarbg.jpg);
height: 100%;
}
If you want your menu to be ALWAYS visible you might wanna use the solution from a previous answer.
If you would simply like to extend your sidebar after a scroll - you need to use the so-called css equal height columns - here is an example of them: http://www.vanseodesign.com/css/equal-height-columns/
There is big problem in this layout you are using background image on body tag which is 1920x99 so your body is reacting to this section only.
some quick changes make this working fine.
please see my attached output i did these quick changes with developer tool.
you should restructure the layout put everything inside wrapper and use float,position for the navigation and other section.
nothing is working together in your layout you should re-build it and use proper style for the every section
if you want equal height #navigation and #wrapper apply this class .equal_height and
use this jquery function with library file
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".equal_height"));
});
May it will help you.
Please add a background color to #wrapper and see your #leftcolumn and #rightcolumn are not in the #wrapper area. Maybe this is an issue in your template. Please check after fixing that.
If that won't work you can use jQuery to get heights dynamically and set the navigation height.
I'm trying to lay the header of my page out so that it looks like this:
I would like to avoid using tables if posible. I'm html and css beginer co I cannot get it working :(.
This is my best try till now:
Html:
<div class="rightAlign" >
<div class="notificationArea">
<img src="../bigHeaderImage.png" />
</div>
<div>
<div>
<img src="../smallImage.png" />Some info<br/>
Other info
</div>
<div>
<div class="ignoreRightAlign">
<a href="#" >Menu1</a>
<a href="#" >Menu2</a>
</div>
<a href="#" >Menu3</a>
</div>
</div>
</div>
CSS:
.rightAlign
{
clear: both;
text-align: right;
}
.ignoreRightAlign
{
float: left;
}
It does not work as desired of cause: Menu line is not on the bottom aligned to bottom of "Big header picture".
Thank you for any help, ideas and advices
To get your menu to line up with the bottom of your big image though you need to absolutely position the menu items within a relative parent. I've simplified it a bit, but here are the necessary pieces to make it happen:
<html>
<head>
<title>test</title>
<style type="text/css" media="screen">
.right
{
float: right;
}
.header
{
position: relative;
}
.menu
{
position: absolute;
bottom: 0;
right: 0;
left: 250px;
}
.info p
{
float: right;
}
.rightHeader
{
float: right;
}
</style>
</head>
<body>
<div class="header">
<img src="bigimage.png" />
<div class="rightHeader">
<div class="info">
<img src="smallimage.png" /><p>Some info <br /> Other info</p>
</div>
<div class="menu">
Menu 3
Menu 1
Menu 2
</div>
</div>
</div>
</body>
</html>
W3 visual formatting model is also a great read for learning how CSS layouts work.
Also:
Have you tried CSS "position"?
.smallPicture
{
position: absolute; //Or relative (among other options)
right: 15px; //Or whatever it needs to be
top: 0; // Can be in ##px or ##em or %
}
I am working on a site laid out with divs. I am having trouble with one in particular: the training photo div.
If you go to http://php.wmsgroup.com/eofd6.org/education.html you'll see a photo underneath the left nav that has dropped down. I want it to snap right under that nav box. I have tried several different things with its positioning as well as the main content divs positioning and I can't get it right.
Any help would be appreciated. The link to the style sheet is http://php.wmsgroup.com/eofd6.org/in.css
Thanks!
Float #content right, not left.
In order to get more predictable results, I would create an over-all wrapper, then 2 column wrappers. You're close to this layout now, so it would be a simple fix.
<html>
<head>
<style type="text/css">
#leftColumn {
width: 30%;
margin: 0px;
float: left;
display: inline;
clear: left;
}
#rightColumn{
width: 60%; /* allow 10% for flex/margins */
margin: 0px auto;
float: left;
display: inline;
clear: right;
}
</style>
</head>
<body>
<div id="pageWrapper">
<div id="header"></div>
<div id="leftColumn">
<div id="nav"> </div>
<div id="training_photo"> </div>
</div>
<div id="rightColumn">
<div id="content"> </content>
</div>
</div>
<div id="footer"> </footer>
</body>
Can't you change the markup to include the #training_photo div in the #nav div?