I have been trying to figure this little bugger out for a little while, and now I seek some expertise. What am I trying to do? I want to create a 100% width menubar, but keep the logo, and the content centered so it can fit in with the rest of the content. The container is on 1000px. Right now I have placed my menu outside of the container tag, and used "width: 100%" to get it to cover the screen. However with that the content moves to the left. I don't really know how to fix this, I have been working on it for a while.
Here is my HTML code:
<body>
<!-- navigation / header -->
<div class="grid_12" id="menu">
<div class="grid_3" id="logo">
<img src="img/logo.png" alt="logo" />
</div>
<div class="grid_9 omega">
<ul class="nav">
<li>
<label>
Features
<br />Check our features
</label>
</li>
<li>
<label>
Pricing
<br />Starts at $X/month
</label>
</li>
<li>
<label>
30-day free trial
<br />Start using us right away
</label>
</li>
<li class="sign-btn">
Log in
</li>
</ul>
</div>
</div>
<div class="container clearfix">
and here is my css file:
#menu {
width:100%;
margin: 0 0 0 0;
padding: 0;
background: #1d3853;
color: white;
font-size: 13px;
}
.nav li {
padding-top: 15px;
list-style:none;
float: left;
text-align: center;
margin-right: 20px;
}
.nav li a {
color: #a7c5e3;
font-family: helvetica;
font-weight: bold;
letter-spacing: 1px;
}
.sign-btn a {
color: #FFF;
display: block;
background: #105296;
padding: 10px 15px;
text-align: center;
border-radius: 5px;
border: 1px solid white;
}
So I ask again, dear StackOverflow... how do I get my links in the center with the rest of my content. Like this picture: http://www.cssnewbie.com/wp-content/uploads/2009/12/centered-navbar-sketch.png
write your navigation code inside another div with class=container.
That is
<body>
<div class="container">
<!-- your navigation code here-->
</div>
</body>
To center something with a set width, add the style margin:auto. To be more precise, you only need margin-left:auto and margin-right:auto to give equal padding to an element inside a container.
Related
I have seen the similar questions on Stackoverflow, I tried their instructions but still it makes no difference. I have done the margin:0 padding:0 on my code too.
The first div is the side bar, the second div is the content(blue), and there is white space on the right. The space on the right isnt a third div, it seems to just be white space. I dont want the white space to be there.
Here is my CSS/HTML:
#dashboard {
width: 100%;
}
#content {
float: right;
width: 80%;
overflow: hidden;
background: aqua;
}
#sidebar {
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: bolder;
line-height: 18px;
color: #c5cdd1;
text-decoration: none;
background-color: #14253f;
width: 220px;
height: 100%;
float: left;
width: 20%;
overflow: hidden;
}
<section id="dashboard">
<div id="sidebar">
<!-- Logo -->
<div id="logo"><img src="img/FDMxLogo.png" /></div>
<!-- Nav -->
<nav id="nav">
<a class="mob-nav"> </a>
<ul>
<li id="m-item" class="current">
<img src="img/ico_home.png" />DASHBOARD
</li>
<li id="m-item">
<img src="img/ico_report.png" />REPORTS
</li>
<li id="m-item">
<img src="img/ico_cust.png" />CUSTOMIZE
</li>
<li id="m-item">
<img src="img/ico_set.png" />SETTINGS
</li>
<li id="m-item">
<img src="img/ico_about" />ABOUT
</li>
<li id="m-item">
<img src="img/ico_con" />CONTACT
</li>
</ul>
</nav>
</div>
<div id="content">
Add Graph<br>
<br>
<br>
<br>
<?php echo $div;?>
<button style="margin-top:0em;width:100%; " type="submit" onClick="remove();">REMOVE</button>
</div>
</section>
Here is a simple edit you could try.
I added
display:table;
to #dashboard.
I removed float from both #content and #sidebar. I also removed thie width percentages from both but left the width:220px. in sidebar.
Then I added
display:table-cell;
to both #content and #sidebar.
Fiddle:https://jsfiddle.net/r5jcv2yu/
The 80% width on #content is messing it up I think. You are also using width twice on #sidebar
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'm trying to understand 3 problems.
1) When minimizing to Col-XS, the picture is slightly off from centre - How do I fix this?
2) When the logo sits inside the Column, it forces the entire menu to widen due to the logo taking up space. This causes a huge amount of background colour (from the menu) to appear when not needed. Can anyone recommend a suitable fix for this (whether this be a design recommendation or a coding fix)?
3) If the above cannot be fixed, how do I make the 4x Menu items move from the top of the bar to the bottom? Would this be a job for Display: Relative or something like that? Or do the display tags not work within bootstrap (v3.3.5)?
Thanks in advance!
Snippet
.logo {
width: 150px;
height: 150px;
}
.header {
background: #5A1FD3;
border: 2px solid #46248B;
}
.header li {
list-style-type: none;
background: #5A1FD3;
font-weight: bold;
font-size: 20px;
text-align: center;
}
.header li:hover {
transition: 1.5s;
background: #46248B;
}
.header a:link {
color: azure;
}
.header a:visited {
color: azure;
}
.header a:active {
color: azure;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- NAV MENU -->
<div class="container-fluid">
<div class="row">
<div class="header col-sm-12 col-xs-12">
<div class="row text-center col-sm-3 col-xs-0">
<img class="logo center-block" src="Pictures\Jamie Bohanna.png" alt="Logo">
</div>
<ul>
<li class="col-sm-2 col-xs-12">Home
</li>
<li class="col-sm-2 col-xs-12">Portfolio
</li>
<li class="col-sm-2 col-xs-12">Rates
</li>
<li class="col-sm-2 col-xs-12">Contact
</li>
</ul>
</div>
</div>
</div>
It is, for logical reasons, practical to use two rows. One for the logo and one for the list. And together they are the header:
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-..."
<img class="logo" />
</div>
</div>
<div class="row">
<div class="col-..."
<ul class="list-unstyled"><!-- .list-unstyled is a bootstrap class -->
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div><!-- End of .header -->
</div>
.container-fluid has a padding-left: 15px and a padding-right: 15px, so that one can make
.header {
margin: 0 -15px;
...
}
so that there will be no gap on the right and left side.
Example
I have a fixed header with three tabs. On the rest of the page I have both text and images. I was able to have text scroll "under" the fixed header but the images overlap. I tried setting the background of the header as an image but that did not work. I also tried various z-index values but also lacked results. I'm posting the CSS with no z-index on the header because it doesn't affect the fixed header in terms of the overlap problem, but only shifts it off-center. Is there a way to fix this with CSS?
Thanks
HTML Code:
<div class="header">
<div class="container">
<ul class="pull-right nav nav-pills">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<p>text here</p>
<img src="image.jpg"/>
<p>more text</p>
</div>
</div>
CSS code:
body {
width: 100%
margin: auto;
background-color: #f7f7f7;
}
.header {
background: #FFFFFF;
position: fixed;
top: 0;
width: 100%
}
.toolbar a {
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
.toolbar li{
display: inline;
}
.content {
margin-top:100px;
z-index:10;
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--Tabs Here-->
</div>
</div>
You have to use a Bootstrap feature (navbar) as opposed making the div a fixed element at the top of the page.