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 %
}
Related
I am attempting to implement three images horizontally into a HTML website. However when i format it using CSS nothing is happening, I am very confused as it should theoretically work. I would greatly appreciate if anyone could help me out, thank you.
HTML page image part:
</p>
<div class="row">
<div class="column">
<img src="gosportSunset.jpg" alt="Sunset" style="width:33%">
</div>
<div class="column">
<img src="gosport.jpg" alt="Gosport" style="width:33%">
</div>
<div class="column">
<img src="gosportRace.jpg" alt="Race" style="width:33%">
</div>
</div>
</p>
CSS image formatting part:
/* Three image containers */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
If the grid is not working try to add box-sizing: border-box; in .column
.column {
float: left;
width: 33.33%;
padding: 5px;
box-sizing:border-box; // important
}
Instead of using div structure you can try something with ul & li, also make use of "column-count" property using which you can define the number of columns you want in a horizontal row.
Refer link for more understanding about "column-count" property:
https://www.w3schools.com/cssref/css3_pr_column-count.asp
<!DOCTYPE html>
<html>
<head>
<style>
ul {
column-count: 3;
list-style: none;
}
</style>
</head>
<body>
<div class="row">
<ul>
<li>
<img src="gosportSunset.jpg" alt="Sunset "/>
</li>
<li>
<img src="gosport.jpg" alt="Gosport" />
</li>
<li>
<img src="gosportRace.jpg" alt="Race" />
</li>
</ul>
</div>
</body>
</html>
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.
I'm currently skinning site for a virtual airline and I need help as to how to get
two images to show up on the same line instead of one breaking onto the next line.
It should be displayed as:
LOGO ICON
But instead it turns into:
ICON
LOGO
Does anyone know how to fix this in the CSS?
Thanks!
Check this jsfiddle
You can make a div for each LOGO and ICON and float them.
<div class="head">
<div class="logo">LOGO</div>
<div class="logo">ICON</div>
</div>
and CSS:
.head { width:100%;}
.logo {float:left; padding:10px;}
First, I have to admit your HTML is screwed up - inline style declarations, incorrect image links, etc.
Replace the #top div with the following in your layout.tpl file:
<!-- Logo + Search + Navigation -->
<div id="top">
<a id="logo" href="<?php echo SITE_URL?>" target="_blank">
<img src="/lib/skins/klm/img/logo.png" alt="Home">
</a>
<img id="fb" src="http://fc04.deviantart.net/fs71/f/2012/295/0/a/facebook_icon_by_x_1337_x-d5ikwkm.png" alt="Facebook">
</div>
Replace the following CSS style declarations with this:
#fb {
float: left;
position: absolute;
display: inline;
width: 50px;
bottom: 0;
right: 0;
}
#logo {
bottom: 0;
display: inline;
left: 0;
position: absolute;
}
#top {
height: 58px;
margin: 0;
padding: 10px 0;
position: relative;
}
try using links instead of using image tags ,,
HTML:
<div class="container">
<a class="one"><a class="two"></a></a>
</div>
CSS:
.one {float:left; background-image: url(../img/logo.png);}
.two {float:right; background-image: url(../img/ico.png);}
or if you still want to use the image tag, you can also use this ..
HTML:
<div class="container">
<img class="one" alt scr="bla">
<img class="two" alt scr="bla">
</div>
CSS:
.container {display:table;}
.one, .two {display:table-column;} -or- .one, .two {display:table-cell;}
if you're going to change the container's size, sure it must fit both of the images.
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).