Hey guys I am looking for help in regards if i am doing my code right i want to page jump to a section on the same page but every time i click on these links nothing happens.
<div align= "center" id="topdiv">
|HOME|
<b>|PASTA DISHES|</b>
<b>|PIZZA DISHES|</b>
<b>|House Hero Sandwhiches|</b>
</div>
#pasta{
width: 100vw;
height: 600px;
background: pink;
}
#pizza{
width: 100vw;
height: 500px;
background: skyblue;
}
#sandwhiches{
width: 100vw;
height: 700px;
background: lightgray;
}
<div align= "center" id="topdiv">
|HOME|
<b>|PASTA DISHES|</b>
<b>|PIZZA DISHES|</b>
<b>|House Hero Sandwhiches|</b>
</div>
<div id="pasta">
PASTA
</div>
<div id="pizza">
PIZZAA
</div>
<div id="sandwhiches">
SANDWidthweradfsdf
</div>
You can make like this.
Related
This is how it looks so far:
And this is what I need to achieve:
<section class="section sub-masthead--TC2"></section>
<section class="section qualifiers--Q1"></section>
The first <section class=sub-masthead--TC2> element contains the image in some nested divs. With the design above is very clear what I need. I already set position: relative to both sections and z-index: 1 to the upper section and z-index: 3 to the down one but it doesn't work.
This is the whole HTML for the section that contains the image:
<section class="section sub-masthead--TC2">
<div class="sub-masthead__wrapper">
<div class="sub-masthead__tiles">
<div class="sub-masthead-item">
<div class="sub-masthead-item__content">
<div class="sub-masthead-item__copy">
<p><!-- text --></p>
</div>
</div>
<div class="sub-masthead-item__image-container">
<!-- IMAGE HERE -->
<img class="sub-masthead-item__image" src="assets/images/bg_phone-unique.png" alt="" role="img">
</div>
</div>
</div>
</div>
</section>
Here is my try. I have created an example for you to follow along.
First add position: relative to the parent element of both sections or if there is none then the body.
Then add position absolute to image section and manipulate top values.
.sub-masthead--TC2 {
position: absolute;
top: 40px;
right: 0;
}
Result:
.wrapperDiv {
position: relative;
}
.sub-masthead--TC2 {
width: 100%;
height: 100px;
background-color: tomato;
}
.qualifiers--Q1{
width: 300px;
height: 300px;
position: absolute;
top: 40px;
right: 0;
border: 1px solid #000;
padding: 20px;
}
img{
width: 100%;
height: auto;
}
<div class ="wrapperDiv">
<section class="section sub-masthead--TC2"></section>
<section class="section qualifiers--Q1">
<img src="https://placeimg.com/640/480/any" />
</section>
</div>
I want to add divs on both sides of the image. I'm trying to make two yellow
horizontal rectangular divs on both sides.
You can use flex boxes in CSS. Read about it here: FLEX-BOX
Fiddle here: fiddle Thank you to Alon Eitan for his valuable suggestion!
So, encapsulate your entire div with a parent div and then you can play around with the heights and width.
So your structure will be like:
<div id="mainDiv">
<div id="div1">
</div>
<div id="img1">
<img id="image" src="http://i.imgur.com/HKwhBJp.png"/>
</div>
<div id="div2">
</div>
</div>
Put the image in a div and use pseudo-elements
body {
width: 100vw;
height: 100vh;
background: rgb(141, 0, 0);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.image-container {
width: 100vw;
height: 50vh;
background: red;
display: flex;
}
.image-container:before,
.image-container:after {
content: "";
display: block;
width: 25%;
height: 100%;
background: yellow;
}
.image {
width: 50%;
height: 100%;
}
<div class="image-container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/4/4f/World_topic_image_Satellite_image.jpg">
</div>
Your requirement should be starting somewhere what this image is showing below. You can tinker around with it to get the layout which you need
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
#container{width:100%;height:100%; background-color: white;}
#left{float:left;width:100px;height:100px;background-color: yellow;}
#right{float:right;width:100px;height:100px;background-color: orange;}
#center{margin:0 auto;width:100px;height:100px;background-color: violet;}
</style>
<div id="container">
<div id="left">Your Left Div</div>
<div id="right">Your Right Div</div>
<div id="center">Image Goes Here</div>
</div>
</body>
</html>
First question so sorry if this is a bit squiffy.
I'm trying to get a full (100%) width fixed header with content within, such as logo and navigation links, that is aligned to the main container. I'd like to do this without the use of margining left or right on the logo/nav content as that doesn't seem particularly flexible.
I tried putting the header div within the container block, that fixes the alignment issue but then I can no longer go full width.
So basically how do I get content in a full width fixed header to align with content in the main content of the page?
Here is my html (sorry if its messy, I've only been at this a week or so):
<body>
<div id="header">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Here is my CSS, I left the logo image out and in place is just a beige block:
body {
margin: 0px;
background-color: darkgray;
}
#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
width: 960px;
margin: 0px auto;
height: 1000px;
background-color:gray;
}
#footer{
width: 100%;
height: 100px;
background-image: url("images/bg-header.jpg");
}
Any advice?
Thank-you
Add an inner wrapper to your header HTML
<body>
<div id="header">
<div id="header_inner"><!-- inner div -->
<div id="logo">
</div>
<div id="nav">
</div>
</div><!-- end inner div-->
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Then add the same width styling as your container to the wrapper:
#header_inner{
width: 960px;
margin: 0px auto;
}
Then the main content and your header content will align.
Some side notes:
classes are always better than IDs for styling
fixed width are generally not a great idea if you're going for a responsive solution
For Fixed Header or Footer you can use
.header_class {
width: 100vw;
float: left;
position: fixed !important;
top: 0px;
background: url: ('images/img.png') no-repeat;
height: 100%;
}
another better suggestion you can follow facebook header css means upper blue section css (css class name: .fixed_elem, .fixed_always)
I had a little trouble understanding what exactly you were looking to do so I made this example which shows a full page with header and one contained within the middle content area. The main problem I saw was that when you do things like width:100% it doesnt do 100% it is allowed.. but the full width of the parent element. You can use width:inherit to get the max width allowed. Here is the example with a full white header width and one contained using black. Its all in how you structure the parent child DOM relationship structure
<!doctype html>
<html>
<head>
<style>body {margin: 0px;background-color: darkgray;}
header{background-color: white;height:100px;width:100%;}
#header{width: inherit;height: 100px;position: fixed;top: 0px;background-image:url("images/bg-header.jpg");opacity: 0.9;background-color: black;}
#logo {height: 100%;width: 300px;background-color: beige;}
#container {width: 960px;margin: 0px auto;height: 1000px;background-color:gray;}
#footer{width: 100%;height: 100px;background-image: url("images/bg-header.jpg");}
</style>
</head>
<body>
<header><div></div></header>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="nav"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
The easiest solution is to add a container inside the #header. Create a class .container that has the properties shared by the #container and this container. Also make sure that the container inside the #header gets 100% height.
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
body {
margin: 0;
background-color: darkgray;
}
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
background-image: url("http://placehold.it/100x100");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
height: 1000px;
background-color: gray;
}
#footer {
height: 100px;
background-image: url("http://placehold.it/100x100");
}
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
<div id="header">
<div class="container">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
</div>
<div id="container" class="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
Basically you want to have a full width 100px header and footer which are fixed to top 0 and bottom 0. but at the same time you want the content to not exactly roll under the header and footer. I hope I understood the question here.
To achieve that obviously give position fixed to header and footer but now to get your content aligned right, you have to give a margin of the height of header and footer ( 100px)
Here is the code snippet... I have added different colors and some filler content to see the difference.
body {
margin: 0px;
background-color: darkgray;
}
#header,
#footer {
width: 100%;
height: 100px;
position: fixed;
left: 0;
background: blue;
opacity: 0.5;
text-align: center;
color: red;
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
float: left;
}
#nav {
height: 100%;
width: 450px;
background: cyan;
opacity: 0.5;
float: right;
}
#container {
width: 960px;
margin: 100px auto;
height: 1000px;
background-color: orange;
}
<div id="header">
<div id="logo">logo</div>
<div id="nav">nav</div>
</div>
<div id="container">
<div id="content">
content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>
</div>
</div>
<div id="footer">footer</div>
Hope this was what you were looking for.
I've had this problem many times before, where you want full width images, but they're in containers at a fixed width. At any rate there's a few things you can do here. You can add a container class to every section you want in a container; You put a mini-container in divs you want to break the rules, (this also requires taking said div / #header out of the main #container)
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
Than put a div inside of that called content, and set content up like this.
.content {
width: 960px;
margin:0 auto;
display:block;
}
So your markup/html should look like
<div id="header">
<div class="content">
<ul>
<li><a>Home</a></li>
<li><a>Other</a></li>
</ul>
</div>
</div>
There are more options, but these seem to make sense for this issue.
Hope This Helps,
-Alex
I am using bootstrap and the page width is NOT fixed.
I would like to display a contact form div (grey box below) like this:
So the grey contact form is sort of floating over the blue and white divs.
Thanks!
Here's what I have been trying to do: http://jsfiddle.net/w69j4xam/
<div class="header">
Header
</div>
<div class="content">
<div class="bluediv">
Some text here
</div>
<div class="whitediv">
Some more text here
</div>
<div class="contactform">
Contact Form<br/><br/><br/><br/>
</div>
</div>
body{
padding: 20px;
}
.header{
height: 50px;
background-color: green;
}
.content{}
.bluediv{
height: 150px;
background-color: #AFEEEE;
}
.whitediv{
height: 180px;
background-color: #FFF;
}
.contactform{
background-color: grey;
width: 100px;
position: absolute;
}
In terms of your jfiddle example, all you need to add is a right and a top.
.contactform{
right:50px;
top:100px;
background-color: grey;
width: 100px;
position: absolute;
}
http://jsfiddle.net/w69j4xam/2/
Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.
<style type="text/css">
.inner {
position: absolute;
}
</style>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>
I'm redesigning a site and the different sections (header, banner image, main, etc.) have a background that stretches all the way across, however the content is contained to a certain width and that box is centered.
However, in the design the "banner image" (which is a image below the header but above the main content) will extend beyond the width of the rest of the content. At first this was easy until a need arose to have text on top of the banner image, and that text would need to line up with the rest of the text.
I cannot use CSS background image because on some pages the banner image area will be a slider, which requires tags.
I have a working solution, but it seems clunky and I was hoping to find a better method: http://jsfiddle.net/PkStg/10/
HTML:
<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
<div class="banner-image-wrapper">
<img src="http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg" />
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>
CSS:
.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}
.banner-text-outer {
position: relative;
}
.banner-text-inner {
position: absolute;
top: 10px;
}
.banner-image-wrapper {
margin: 0 auto;
max-width: 400px;
min-width: 300px;
font-size: 0;
}
.banner-image-wrapper img {
width: 100%;
}
I know that you wanted to not use background-image, but here is a solution which uses that for anyone else who sees the page.
Perhaps your slider could make use of the background-image?
This should do it:
jsFiddle
HTML
<body>
<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>
</body>
CSS
.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}
.banner {
background: green url("http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg") no-repeat;
background-size: contain;
background-position: center;
min-height: 150px;
}