Here is a simple frame for the layout I'm trying to achieve: http://i.imgur.com/7kmCBpd.png
I'm focused on the header at the moment, and I've managed to get it to look how I want it to, but I feel like I haven't employed the best methods. When I resize the browser width, the words at the ends of the h1 and h2 elements are pushed to the next line and it creates a jumbled mess. Ideally, I'd like all of the contents of the header to scale proportionally when the browser becomes too narrow. What is the best way to achieve this?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src='logo.png' alt="Logo" class="logo">
<h1>TITLE TITLE</h1>
<h2 id="Subtitle1">SUBTITLE 1 SUBTITLE 1</h2>
<h2 id="Subtitle2">SUBTITLE 2 SUBTITLE 2</h2>
</header>
<nav>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Resources</li>
<li>Events</li>
<li>Contact Us</li>
<li>Get Involved</li>
</nav>
<footer>
<p>© 2014 </p>
</footer>
</body>
</html>
CSS
header {
max-width: 800px;
max-height: 285px;
margin: auto;
}
h1, h2, li, p {
font-family: "tw cen mt", "century gothic", sans-serif;
}
h1, h2 {
position: absolute;
display: inline;
letter-spacing: 2px;
float: left;
}
h1 {
font-size: 5em;
}
h2 {
font-size: 3em;
}
#Subtitle1 {
top: 100px;
}
#Subtitle2 {
top: 150px;
}
.logo {
position: relative;
display: inline;
float: left;
max-width: 285px;
}
Maybe applying the following would get what you're looking for
h1, h2 { white-space: nowrap; }
You can use media queries to resize elements based on window size.
Also, as a general tip, try using {display: inline-block;} instead of {float: ...;}. It will vastly simplify a lot of cases.
First, of all it would be a good practice if you wrap your headings with a div and float this instead of the headings. Something like this:
HTML
<header>
<img src='logo.png' alt="Logo" class="logo">
<div id="h-container">
<h1>TITLE TITLE</h1>
<h2 id="Subtitle1">SUBTITLE 1 SUBTITLE 1</h2>
<h2 id="Subtitle2">SUBTITLE 2 SUBTITLE 2</h2>
</div>
</header>
CSS
header img,
header #h-container { float:left; }
Second, you should not mix float with absolute positioning. In this case there is no need to absolute position your headings.
As for the scaling, you could use media queries to target specific browser widths and reduce the font size for smaller widths.
If you want your logo to scale too you could do something like:
HTML
<div id="logo-container">
<img src='logo.png' alt="Logo" class="logo">
</div>
CSS
#logo-container { max-width:200px; min-width:100px; }
#logo-container img { width:100%; height:auto; }
Related
I can't figure out why my logo img is leaking into my navigation and not aligning. I need the logo to align with the h1 and h2 in my header. It currently looks like this:
Here is my html:
<body>
<div id="headerWrapper">
<header>
<img src="images/logopracticedone.png" alt="">
<h1>Science Museum</h1>
<h2>A Celebration of Technology & Mechanics</h2>
</header>
</div>
<div id="navWrapper">
<nav class="clearfix">
<ul>
<li class="active">Visit Us</li>
<li>See and Do</li>
<li>Learning</li>
<li>Education</li>
</ul>
</nav>
</div>
Here is my SCSS:
body {
font-family: $fontFamily;
font-size: 16px;
font-weight: $regularWeight;
}
header {
img { max-width: 100%;
max-height: 100%;
float: left;}
padding: 1rem $gutter;
h1 {
margin: 0;
font-size: 1.5rem;
font-weight: $semiBold;
} //end of h1
h2{
margin: 0;
font-size: 1.2rem;
font-weight: $regularWeight;
} //end of h2
} //end of header
Remove float from img
Adjust the height in css of img to fit according to your design.
Move the headings into a div to cover for removing that float.
Make display inline-block for both the new div and img
<img src="images/logopracticedone.png" alt="">
<div>
<h1>Science Museum</h1>
<h2>A Celebration of Technology & Mechanics</h2>
<div>
I have a simple website that I've made from scratch. I got confused with the layout of my header:
H1 title
Text line
Logo
Menu (coding from w3school)
These four are within my div header. I'd like to be able to position them wherever I want within the div. The issue I have is that I'm not sure what coding to use for this (margin, position: relative or absolute, padding, top:, right:, etc.).
I've tried all kinds of combinations but it seems they never position where I want them and they mess up each others' position: the menu loses full width, the logo I can't get nicely with same space between top and right of header div, the H1 and tag don't seem to respond to the pixels I set, and so on.
Could someone please take the time and have a look at my code and come with a suggestion how to make this layout stable?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
body {
background-color: #F8F8F8;
}
#page {
width: 900px;
margin: 30px auto;
background-color: #FFFFFF;
}
#header {
height: 377px;
width: 100%;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#header a {
color: black;
text-decoration: none;
}
#header ul {
list-style-type: none;
margin-top: 0;
padding: 0;
overflow: hidden;
background-color: #3399FF;
position: relative;
top: 264px;
}
#header li {
float: left;
}
#header li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#header li a.active {
background-color: gray;
}
#header li a:hover:not(.active){
background-color: #3366CC;
}
.p1 {
font-family: Consolas, monaco, monospace;
font-size: 20px;
position: relative;
top: 28px;
left: 50px;
}
.p2 {
font-family: Consolas, monaco, monospace;
font-size: 16px;
position: relative;
top: 5px;
left: 200px;
}
.logo {
float: right;
position: relative;
top: 8px;
right: 8px;
}
#content {
position: relative;
top: 12px;
left: 10px;
}
#footer {
font-size: 14px;
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
border-top: #D3D3D3 0.5px solid;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<img class="logo" src="images/logo-d.png">
<span class="p1"><h1>This is my H1 Title</h1></span>
<span class="p2">"This is going to be my tag under H1"</span>
<ul>
<li><a class="active" href="">Link menu</a></li>
<li>Link menu 2</li>
<li>Link menu 3</li>
<li>Link menu 4</li>
<li>Link menu 5</li>
<li>Link menu 6</li>
</ul>
</div>
<div id="content">
<h1>H1 Title of the page content<h1>
<p></p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<p></p>
</div>
<div id="footer">
The footer of the page
</div>
</div>
</div>
</body>
</html>
Put the contents of the header in an Unordered list as so. If you are using a responsive framework like Bootstrap, this will be completely different - but since you did not specify, here is an example without a framework.
HTML
<div id="header>
<ul>
<li><h1>Your Title</h1></li>
<li><p>some line of text you wanted</p></li>
<li class="logo"><img src="yourlogo.png" /></li>
<li class="spacer"></li>
<li><a href="somepage.html>Some Page</a></li>
<li><a href="somepage.html>Some Page</a></li>
<li><a href="somepage.html>Some Page</a></li>
</ul>
</div>
CSS
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header li{
padding: 0 20px;
display: inline;
}
#header li.spacer{
width:10%
}
It's just a case of structuring the divs correctly, as Holle points out, this is a list of objects rather than a poster. I think the main issue you are having in positioning is that you're foundation structure within your html isn't beneficial for manipulating.
I would recommend having a container div for each section and then further divs or other content within those. i.e.
<div id="headerContainer">
<h1>Title</h1>
<img id="logo" src="myImagePath">
</div>
<div id="navigation">
<!-- Navigation Bar, your UL list items -->
</div>
<div id="pageContent">
<!-- More content... <img>s, <p>s, <h1>s, probably more divs to structure the content etc-->
</div>
I hope that helps, if you want a suggestion, take a look a DevTips youTube channel, he's great at explaining the design and structuring stages when building a website.
Also, in terms of positioning, check out flexbox froggy (google it), just be aware the browser support isn't fantastic before you jump in.
Cheers,
James
First suggestion: try to think of a webpage as list of objects rather than a poster etc. Screen sizes vary (desktop/mobile) and you should use relative widths and positions to ensure responsiveness of your site. I'm sure you can find a better template to work on.
Second suggestion: If you DO wish to position an element "anywhere" this is an example of correct use of positioning:
<style>
.floatingdiv {
position:absolute;
right:0;
top:0;
}
</style>
<div class="floatingdiv">
<h1>Header</h1>
</div>
I have a webpage with an image and a section of text which I'm trying to stack in a vertical line. I figured adding display: block; to .about div would be the appropriate way of doing this. It gives me the vertical stack that I want, but impacts the overall layout of the page. At first I thought it was pulling the header section down the page, but when I inspected the page, it seems as if this command is actually shifting the entire body section down the page. Not sure what is causing this.
<body>
<header>
<a href="index.html" id="logo"> <h1>
<div id="header_title">
Name
</div></h1> </a>
<div id="header_border"></div>
<nav id="nav">
<ul>
<li>
<a href="index.html" class="selected" >About</a>
</li>
<li>
Resume
</li>
<li class="subNav">
<a>Portfolio</a>
<ul>
<li>
Writing Samples
</li>
<li>
Photoshop
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="about_div">
<img src="img/1935323_10153090821883239_4407778661294134622_n.jpg" class="profile-photo">
</div>
<div class="about_div">
<h3 id="about_me">About Me</h3>
<p id="about_me_info">
Text
</p>
<p id="about_me_info">
More Text
</p>
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>
© 2016 My Name.
</p>
</div>
</body>
And CSS:
body {
font-family: 'Playfair Display', open sans;
position: relative;
height: 100%;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding-top: 18%;
}
.about_div {
display: block;
margin-top: 50px;
}
.about_div img {
margin-left: 125px;
}
.about_div h3 {
margin-top: 50px;
margin-right: 1%;
}
.about_div p {
margin-right: 1%;
}
.profile-photo {
max-width: 350px;
border-radius: 100%; /* adds rounded corners to an element */
}
#about_me {
font-size: 2em;
}
#about_me_info {
font-size: 1.5em;
}
How header spacing should look (with inline-block)
How header spacing actually looks when applying display: block
Note that this isn't technically a problem with the header, but rather the entire body section is shifting downward in the second example.
Remove display:block from '.about_div' and add display:flex to '#wrapper'
I have written this code,all the divs are working properly also the nav is. But the black color of the "header" does not seem to work. I have posted the whole code below.Please have a look at the following code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
background-color: black;
margin: 0px;
}
#logo
{
background-color: green;
}
#headTable
{
float:right;
}
#logo
{
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
color: black;
float: left;
margin: 10px 50px;
}
#nav
{
clear: both;
width:100%;
height: 100px;
background-color: purple;
}
#nav ul
{
margin-left: 100px;
padding: 0;
}
#nav ul li
{
display: block;
margin: 10px;
padding: 20px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Others</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
Add overflow:auto to #header:
#header {
background-color: black;
margin: 0px;
overflow:auto;
}
jsFiddle example
Floating the content makes the parent act as if there's no content and it collapses. Adding the overflow rules restores the behavior you seek.
Because #header in this context has no defined size because the only elements it contains have floats.
Three easy ways around this:
Explicitly define dimensions for #header.
Add display:inline-block to #header.
Use a clearfix after the two floated elements in #header. This is done most commonly by using <div style="clear:both;"><!-- --></div>
you must put some "Height" to you #header tag in CSS. Good Luck !
I created a jsfiddle : http://jsfiddle.net/JsA7y/.
So , of course I might have the same "problem" as you ;
the img src point nowhere (in the jsfiddle).
? Where does your img point to ?
? Is the img in the same directory as your html ?
=> Other wise , you will need to use the correct uri ;
such as , if the img is in a directory at the same level as the html :
<img src="directory/plane.jpg" width="150" height="100">
...
Hope this helps.
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).