I'm trying to make a website template and I just started with the header and navbar. I'm trying to position a div with some text inside the #header div. I set the position to relative and I used the top property but it's just not moving. Can someone explain to me why?
You need to remove the semicolon after the #header block in your CSS as this is preventing the browser from reading the next rule in the file:
#header {
width: 100%;
height: 700px;
background-image: url("poro.jpg");
background-size: 100%;
text-align: center;
};
That last semicolon shouldn't be there. The same is true of your semicola following the #navbar li and #header-msg blocks.
#header {
width: 100%;
height: 700px;
background-image: url("poro.jpg");
background-size: 100%;
text-align: center;
}
#navbar {
position: relative;
width: 75%;
height: 100px;
top: 100px;
}
#navbar li {
display: inline;
padding-right: 40px;
color: blue;
position: relative;
left: 350px;
}
#header-msg {
position: relative;
top: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Experimenting
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li class="button">Home</li>
<li class="button">Shop</li>
<li class="button">Offers</li>
<li class="button">FAQ</li>
</ul>
</div>
<div id="header-msg">
<h1>We sell stuff.</h1>
<h3>You buy stuff.</h3>
</div>
</div>
</body>
</html>
Note: I made the #navbar li have blue text in the snippet so they stand out from the white background.
First delete semicolons after all { }. Next try to set
#header {
width: 100%;
height: 700px;
background-image: url("poro.jpg");
background-size: 100%;
text-align: center;
position: relative;
}
and change position of #header-msg to absolute:
#header-msg {
position: absolute;
top: 300px;
}
I just gave an extra space after the semicolon.
#header {
width: 100%;
height: 700px;
background-image: url("poro.jpg");
background-size: 100%;
text-align: center;
};
#navbar {
position: relative;
width: 75%;
height: 100px;
top: 100px;
};
#navbar li {
display: inline;
padding-right: 40px;
color: white;
position: relative;
left: 350px;
};
#header-msg {
position: relative;
top: 500px;
};
<!DOCTYPE html>
<html>
<head>
<title>
Experimenting
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li class="button">Home</li>
<li class="button">Shop</li>
<li class="button">Offers</li>
<li class="button">FAQ</li>
</ul>
</div>
<div id="header-msg">
<h1>We sell stuff.</h1>
<h3>You buy stuff.</h3>
</div>
</div>
</body>
</html>
Related
I nearly spend 4 hours trying to make this layout. I tried absolute positioning but obviously, It's not responsive.
Image is 660px and Right container is 860px.
<div className="container">
<div className="image-container">
<img src={image} />
</div>
<div className="right-container">
<div className="insde-some-text">
</div></div>
As far as my knowledge goes, you can only do this by position absolute and then changing the widths at certain breakpoints using media queries.
To add to what Khubaib said, you would want to use position: absolute in your .css file. Also, using scalable quantities for the boxes will help you for the certain screen sizes that you want your site displayed on.
Also, you can use position: relative on blue block and make the attribute top: -100px or so. This blue-block will always be relative to its normal position.
.red-block
{
width: 20rem;
height: 20rem;
background-color: red;
position: absolute;
}
.blue-block
{
width: 20rem;
height: 20rem;
background-color: blue;
position: absolute;
top: 50%;
left: 25%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<div class = "red-block">
</div>
<div class = "blue-block">
</div>
</body>
</html>
You could use this for reference. Simple demonstration using flex and margin.
.wrapper {
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5%;
width: 100%;
}
.right-container {
border: solid red 1px;
border-radius: 5px;
width: 860px;
height: 860px;
background-color: #e1e1e1;
text-align: center;
}
textarea {
height: 80%;
width: -webkit-fill-available;
text-align: center;
background-color: lightblue;
}
.img {
margin-right: -3em;
position: relative;
}
img {
max-width: 100%;
}
<div class="wrapper">
<div class="container">
<div class="img">
<img src="https://dummyimage.com/660x400/000/fff" alt="">
</div>
<div class="right-container">
<textarea placeholder="hello world"></textarea>
<p>foooooooooooooooooooooo</p>
</div>
</div>
</div>
I am trying to create a sticky footer but I'm getting empty space above and below my header & footer.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
What is the best way to create a sticky footer?
Can anyone explain why I've got this space appearing above header & below footer when I have content (h1 p) in in my header section.
For the header gap, your h1 and p tags have a default padding and margin, you may want to remove them or reduce them to your liking
h1, p {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,p {
padding: 0;
margin: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
A "sticky" div can be achieved using position: fixed; in your footer CSS. Fixed means that the on-screen position will never change. Or rather you should follow the instructions posted there.
Concerning the space, it is probably because of the default styles applied to h1. Use a debugger to see those default styles and override them with your custom css.
Firefox and Chrome have built in debuggers that also let you view styles and are very efficient for debugging. Usually right click > "inspect element" then go for the CSS tab which lets your select and see styles applied to elements.
In your example, you are not "resetting" the h1 and p tags. By default these elements have some extra margin.
Try adding the following code to your css.
h1, p {
margin: 0;
}
Also check out the HTML5 CSS Sticky Footer.
you may use flex prperties
.wrapper may scroll, header & footer are sticky
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display:flex;
flex-flow:column;
}
header {
background-color: orange;
position: relative;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
width: 100%;
height: 60px;
bottom: 0;
}
.wrapper {
flex:1;
overflow:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
or just footer is sticky ?, needs an extra imbrication
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body, main {
display: flex;
flex-flow: column;
}
header {
background-color: orange;
position: relative;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
height: 60px;
bottom: 0;
}
.wrapper, main {
flex: 1;
}
main {
overflow: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<main>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
</main>
<footer>
footer
</footer>
</body>
</html>
footer {
background-color: #202020;
color: white;
//replace absolute with fixed for sticky footer (as in, it sticks at the bottom.)
position: fixed;
width: 100%;
height: 60px;
bottom: 0;
}
I saw this comment you posted on another answer:
If desktop only, then I would go with fixed positioning; however, iOS has problems rendering fixed positioning at times. – SergeantHacker
Try removing height 100% from body and html.
This question already has answers here:
Using only CSS, show div on hover over another element
(14 answers)
Closed 8 years ago.
I'm trying to get it so that when someone hovers over a div box it will display a separate div box below it. How would I go about doing this?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="center">
<div id="content">
<h1>Home</h1>
<div id="product1"></div>
<div id="product1hover"></div>
<div id="product2"></div>
<div id="product2hover"></div>
<div id="product3"></div>
<div id="product3hover"></div>
</div>
</div>
</body>
</html>
CSS:
#center
{
position: relative;
margin: auto;
width: 1000px;
height: 600px;
top: 20%;
border:5px solid;
border-radius:15px;
background-color: #305052;
}
#product1
{
position: relative;
float: right;
margin-top: 50px;
margin-right: 40px;
margin-left: 10px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
#product1:hover
{
#product1hover
}
#product2
{
position: relative;
float: right;
margin-top: 50px;
margin-left: 10px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
#product3
{
position: relative;
float: right;
margin-top: 50px;
width: 200px;
height: 200px;
background-color: #1F3536;
}
If you change your HTML as follows
<div id="product1">
<div id="product1hover"></div>
</div>
The following css will do
#product1hover{
display:none;
}
#product1:hover #product1hover{
display:block;
}
Update
With your existing HTMLyou can achieve this as follows:
#product1hover{
display:none;
}
#product1:hover + #product1hover{
display:block;
}
I'd like to create a layout that acts like a titlebar from iphone:
I tried to put together the following example, but I'm not sure how to get the middle column to expand in width so it uses all left over space. I can do this in javascript at runtime, but wondering if there's a css solution. Here it is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
#parent {
background-color: #eee;
width: 100%;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
}
#colMiddle {
background-color: #c9ffc3;
height: 48px;
display: inline;
text-align: center;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
}
</style>
</head>
<body>
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
<div id="colMiddle">title</div>
<div id="colRight">right</div>
</div>
</body>
</html>
Thank you
A simpler way to approach this is to use an HTML structure like this:
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
title
<div id="colRight">right</div>
<div>
Float the left and right divs to the appropriate sides and set the text align on the parent to center. Any styles from the middle div for text, etc can be applied to the parent.
I'm a bit late in the answer, but see if this is more like what you need, without the need to sacrifice the middle <div>:
You'll have to float the 3 columns and make the inner column have a 100% width. Then, setting the inner column's margin (based on left and right columns' widths), you achieve the result.
Have a look at this fiddle: http://jsfiddle.net/fabio_silva/d7SFJ/
The HTML/CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
#parent {
background-color: #eee;
width: 100%;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
width: 100px;
float: left;
}
#colMiddle {
height: 48px;
text-align: center;
float: left;
width: 100%;
margin-left: -100px; /* negative colLeft width */
margin-right: -150px; /* negative colRight width */
}
#colMiddleInner
{
margin-left: 100px;
margin-right: 150px;
height: 48px;
background: #c9ffc3;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
width: 150px;
float: left;
}
</style>
</head>
<body>
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
<div id="colMiddle">
<div id="colMiddleInner">
title
</div>
</div>
<div id="colRight">right</div>
</div>
</body>
</html>
You need to define the widths...
#colLeft {
background-color: #ff8b8b;
height: 48px;
width: 50px
display: inline;
}
#colMiddle {
background-color: #c9ffc3;
height: 48px;
display: inline;
width: auto;
text-align: center;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
width: 50px;
display: inline;
}
Note: default value for width is auto.
Can anyone see why the following does not quite work. The image is vertically centered within 'VCentInner' correctly but the following Title text seems to align with the image top rather than being vertically within VCentInner.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
}
#header{
position: absolute;
top: 0px;
height: 10em;
width: 100%;
background-color: blue;
}
.VCentOuter {
top: 0; left: 0; width: 100%; height: 100%; position: absolute; display: table;
background-color: green;
}
#headinner{
height: 8em;
background-color: yellow;
}
.VCentInner {
display: table-cell; vertical-align: middle;
background-color: pink;
}
#header img {
float: left;
<!--height: 2em;-->
background-color: yellow;
}
#title{
text-align: center;
color: black;
}
#clearheader{
height: 10em;
}
.centered{
display: block;
margin-left: auto;
margin-right: auto;
}
.txtcenter{
text-align: center;
}
#content{
border: 1px red dotted;
}
#menu {
position: absolute;
bottom : 0px;
width:100%;
height: 2em;
background: cyan;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="clearheader"></div>
<div id="content">
Content
</div>
</div>
<div id="header">
<div class="VCentOuter" id="headinner">
<div class="VCentInner" id="title">
<img src="images/burgee2.gif"/>
Title text
</div>
</div>
<div id="menu">
Menu goes here - tab1 - tab2 - tab3 - tab4 - tab5 - tab6 - tab7 - tab8 - tab9 - tab10 - tab11 - tab12
</div>
</div>
</body>
</html>
Unless that image needs to be a link (or otherwise an actual element), the easiest solution is probably to make it into a CSS background-image:
<div class="VCentInner" id="title">
Title text
</div>
With extra CSS:
#title {
background: url(http://dummyimage.com/100x100/000/fff) left center no-repeat
}
If it does need to be an element:
<div class="VCentOuter" id="headinner">
<div class="VCentInner" style="width: 100px">
<img src="http://dummyimage.com/100x100/000/fff" />
</div>
<div class="VCentInner" id="title">
Title text
</div>
</div>