I'm new to CSS and am designing my first site from scratch using CSS (I've recently graduated from the for the love of God stop using html to style your websites way of life).
I want to create a page where the header and footer extends beyond the width of the body copy and goes complete from left to right of the page. I've started the code but I'm stuck. The header will have a logo and the navigation (I haven't coded the navigation yet but that's not too hard) and the footer will simply have one line of content.
I looked up examples in other questions and the answers are all really complicated and involve things like scroll bars and that's way more than what I want.
Any suggestions on how to do this would be greatly appreciated! Sorry if this is a stupid question. Thanks.
HTML
<body>
<!-- begin wrapper -->
<div id="wrapper">
<!-- begin header -->
<div id="header">
<p>Content</p>
</div>
<!-- begin navigation -->
<div id="navigation">
<ol>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Contact</li>
</ol>
</div>
<!-- begin content -->
<div id="content">
<h1>Heading</h1>
<p>Content</p>
</div>
<!-- begin footer -->
<div id="footer">
<p>Content</p>
</div>
</div>
</body>
CSS
#import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);
#header {
background: #636769;
}
#navigation {
}
body {
font-family: 'PT Sans Narrow', sans-serif;
font-size: 16pt;
background: url(../images/texture.png);
}
#wrapper {
width: 938px;
margin: 0 auto;
padding: 20px 20px;
background: white;
}
#footer {
background: #636769;
}
If you want #header and #footer to span the entire page, you will also have to move them out of #wrapper. You may want to specify height too, e.g. height: 40px.
Do you want the header and footer to stay in place while scrolling? If so, use position: fixed; on both. Then, on #header put top: 0px; left: 0px; right: 0px;; and on #footer put bottom: 0px; left: 0px; right: 0px;.
Anything else that you want to do, let me know. I'd be glad to help.
Since your #wrapper class encompasses the entire page then all subsequent tags will inherit the same value. If you want the #header or #footer to ignore this, then you will need to specify a different value for those classes. Try and change these classes to specify their own width values (i.e. width: 938px;) and see what happens.
Pull the header and footer divs outside the wrapper to allow them to fit the width of the page.
<body>
<!-- begin header -->
<div id="header">
<p>Content</p>
</div>
<!-- begin wrapper -->
<div id="wrapper">
<!-- begin navigation -->
<div id="navigation">
<ol>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Contact</li>
</ol>
</div>
<!-- begin content -->
<div id="content">
<h1>Heading</h1>
<p>Content</p>
</div>
</div>
<!-- begin footer -->
<div id="footer">
<p>Content</p>
</div>
</body>
Related
I am new to CSS, I have a header with a menu list and an image just below the header.
When I hover on Gallery within menu bar, it displaces the image below by the height of hovered block.Is there any way to make the content overlap on the image rather than displacing it.
<header class="container">
<h1>First <br/> Website</h1>
<nav>
<ul class="nav group">
<li>Home</li>
<li>Gallery
<ul>
<li><span>Images</span></li>
<li><span>Videos<span></li>
<li><span>Animations<span></li>
</ul>
</li>
</ul>
</nav>
</header><!-- /header -->
<section class="container img" id="corousel">
<img src="trolltunga.jpg" alt="Test Image">
</section>
<footer class="container">
More to come...
</footer>
Here is a fiddle to my code, https://jsfiddle.net/khushboo_sangal/5xLs5odu/
You need to take the dropdown menu out of the document flow by positioning it absolute. Just make sure to set it's parent's position to relative.
.nav li {
position: relative;
}
.nav li ul {
position: absolute;
}
https://jsfiddle.net/5xLs5odu/2/
You also had some unclosed <span /> tags in your nested ul. Thanks #vals for pointing this out:
<li><span>Videos</span></li>
<li><span>Animations</span></li>
When I started Googling this question I saw the plethora of SO questions that are similar. But I tried them all and no luck.
I am getting a white margin from somewhere. Not sure where.
Here is a fiddle
https://jsfiddle.net/ayezee33/smxdewam/
Here is what I have tried.
Adding margin:0; and padding:0; to the html and body.
Linked up normalize.css
Added 0 margin on the block level element and child element
Found a user agent stylesheet inserting 8px margin (Chrome)
Used the !important call to override that
Noticed user agent stylesheet was applying block to my and
tried to override that but I am sure I actually want that.
Any help would be great. I am going crazy trying to figure this out.
Apparently I need to add code to post this question?
<header>
<h1>Building blocks are important!</h1>
<p>This website serves as my test to showcase my coding abilities</p>
<div id="cta">
<input id="cta" name="email" placeholder="Email">
<button type="submit">Learn More</button>
</div>
</header>
<div class="callout">
<p>Testing this call out section</p>
</div>
.callout {
display:block;
max-width:100%;
height:5em;
background:#000;
text-transform:uppercase;
}
.callout p {
line-height:5em;
margin:0;
}
The space is coming from the margin on your #cta:
margin: 1em auto;
Simplify your css too, I feel like you don't need most of your rules.
The margin on the #cta DIV is the one thats causing the white-space. You can add overflow:hidden to the header, that would fix the issue.
<nav>
<div id="main-nav">
<img src="img/logo.jpg" />
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
</ul>
</div>
</nav>
<header>
<h1>Building blocks are important!</h1>
<div id="cta">
<input id="cta" name="email" placeholder="Email" />
<button type="submit">Learn More</button>
</div>
</header>
<div class="callout">
<p>Testing this call out section</p>
</div>
header {
overflow: hidden;
}
I just started with bootstrap 3 and got stuck on an issue. I wanted to have a side menu like in this documentation which is positioned fixed during scroll down and highlights sections accordingly. I have managed to get something done very similar to this but when I resize the window to mobile size, the side menu overlaps the content instead of being on top of it. If you checked the link, when you resize the window, the sidemenu goes on top of the content.
I believe the culprit here is affix-top but I leave it to the experienced people here in stackoverflow
<body data-spy="scroll" data-target="#myScrollspy">
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Title
<small>Subheading</small>
</h1>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Sidebar Menu -->
<div class="col-md-2" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" >
<li class="active">Section One</li>
<li>Section Two</li>
<li>Section Three</li>
<li>Section Four</li>
<li>Section Five</li>
</ul>
</div>
<!-- Content Column -->
<div class="col-md-9">
<h2 id="section-1">Section One</h2>
<h2 id="section-2">Section Two</h2>
<h2 id="section-3">Section Three</h2>
<h2 id="section-4">Section Four</h2>
<h2 id="section-5">Section Five</h2>
</div>
</div>
</div>
</body>
How can this be fixed?
What you are looking for is called a CSS media query, which allows you to modify a style rule based on media features such as color, height, and width. The Bootstrap page you linked to uses min- and max-width features to change how the sidebar appears, which you can see in its CSS filenear the bottom of the page. The pertinent code looks like this:
#media (min-width: 768px) {
/* Adjust sidenav width */
.bs-docs-sidenav {
width: 166px;
margin-top: 20px;
}
.bs-docs-sidenav.affix {
top: 0;
}
}
#media (max-width: 767px) {
/* Sidenav */
.bs-docs-sidenav {
width: auto;
margin-bottom: 20px;
}
.bs-docs-sidenav.affix {
position: static;
width: auto;
top: 0;
}
}
I have simplified it a little bit, but that should be enough to get you started. When the max-width is less than 768px the sidebar width will change to auto, and the affix code will keep the sidebar at the top of the page.
I am using the latest version of Foundation to add an off-canvas navigation menu and add a toggle to the tab-bar. While I have this working with the tab-bar being sticky, the content of the off-canvas menu scrolls with the page. How can I make the content of the menu be sticky such that on any size screen or page vertical scroll position hitting the menu toggle will show the menu content without scroll? My HTML so far is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="contain-to-grid sticky">
<nav class="tab-bar top-bar" data-topbar data-options="sticky_on: large">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
</nav>
</div>
<div class="inner-wrap">
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</aside>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<!-- Content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Make the height of the content 95vh and the overflow-y=scroll. Whenever the content on the right is scrolled, the off-canvas menu is unaffected and remains at the top.
CSS:
.mycontent {
height:95vh;
overflow-y:scroll;
/* fix scrolling on webkit touch devices (iPhone etc) */
-webkit-overflow-scrolling: touch;
}
HTML:
<div class="row mycontent" >
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
Try this in css (Works 100%)
.tab-bar {
position: fixed;
width: 100%;
z-index: 702;
}
I had the same issue, couldn't get it to stick when open. In the end I went with this:
CSS:
.tab-bar {
position: fixed;
z-index: 9999;
width: 100%;
}
Added an inner wrapper for the off canvas menu right after the "<aside>" tag, before the "off-canvas-list" <ul>s.
.inner-canvas-menu-wrapper
{
position: fixed;
top: 0;
overflow-y: hidden;
width: inherit;
padding-top: 2.8125rem; (standard height of the "tab-bar")
}
JS
Changed foundation.offcanvas.js -> settings -> open_method to "overlap"
Now it overlaps, but it at least it is fixed/sticky. You may want to change close_on_click to "true" as well in this setup.
If you are using Foundation 6 it will be fixed by default:
https://foundation.zurb.com/sites/docs/off-canvas.html#sass-reference
Hello i seem to be having a little trouble doing the simplest of tasks tonight. Trying to make my primary-menu float to the right of my site site-name.
<header>
<div id="header">
<div class="g3">
<h1 id="site-name">
</div>
</div>
<div class="cf"></div>
</header>
<nav>
<div id="primary-menu" class="g3 nav">
<ul id="main-menu" class="menu links clearfix">
</div>
</nav>
<div class="cf"></div>
I dont know if i should be pasting in CSS code to help ut there seems too much from what i can gather. Your welcome to pop in and have a look. dont mind the mess.
Thanks
Add this style to header tag:
header {
width: 110px;
float: left;
}
and this to your nav:
nav {
float: left;
width: 800px;
margin: 10px;
}