<!DOCTYPE html>
<html>
<head>
<style>
/* main elements */
div.body {
display: block;
background-color: Lavender;
border: 0px 20px 0px 20px;
max-width: 1100px;
margin-top: 10px;
margin-right:20px;
margin-left: 20px;
clear: both;
padding: 0px 20px 0px 20px;
}
body {
display: block;
background-color: Lavender;
border: 10px;
max-width:1100px;
margin: 0px 280px 0px 10px;
clear:both;
}
/*Body Divs*/
div.bodycontent{
display:block;
position:absolute;
top: 10px;
width: 1075px;
height: 470px;
background-color: MediumAquaMarine;
margin-right:0;
margin-left:0px;
bottom:10px;
}
div.body1 {
display: inline-block;
background-color: limegreen;
position: absolute;
top: 10px;
width:480px;
height:225px;
margin-left:10px;
padding: 0 10px 0 10px;
}
div.body2 {
display: inline-block;
background-color: Salmon;
position: absolute;
top: 10px;
width:525px;
height:225px;
margin-left:520px;
padding: 0 10px 0 10px;
}
div.body3 {
display: inline-block;
background-color: FireBrick;
position: absolute;
top: 250px;
width:530px;
height:205px;
margin-left:10px;
padding: 0 10px 0 10px;
}
div.body4 {
display: inline-block;
background-color: SeaGreen;
position: absolute;
top: 250px;
width:475px;
height:205px;
margin-left:570px;
padding: 0 10px 0 10px;
}
/*-----------------------------------------------------------------------*/
header {
background-color: Lavender;
}
/*header divs*/
div.header {
display:block;
position:absolute;
width: 1075px;
height:150px;
top:490px;
background-color: PaleGoldenRod;
margin-right:0;
margin-left: 0px;
}
div.backinfo {
display:inline-block;
background-color: lightblue;
position: absolute;
top:80px;
width:455px;
padding:10px 10px 10px 10px;
height:40px;
margin-right:900px;
margin-left:10px;
}
div.digitalbay {
display: inline-block;
background-color: coral;
position: absolute;
width:455px;
height:60px;
top:20px;
margin-top:-10px;
margin-right:560px;
margin-left:180px;
padding: 0 10px 0 10px;
}
div.nav {
display: inline-block;
position: absolute;
background-color: lightblue;
top:10px;
margin-right:0px;
margin-left:665px;
padding: 10px 0px 10px 0px;
height:110px;
width:395px;
}
div.contact {
display: inline-block;
background-color: Chocolate;
position: absolute;
top: 100px;
width:300px;
height:45px;
margin-right:550px;
margin-left:190px;
padding: 0 10px 0 10px;
}
div.contact2 {
display: inline-block;
background-color: DeepPink;
position: absolute;
top: 100px;
width:130px;
height:45px;
margin-right:550px;
margin-left:515px;
padding: 0 10px 0 10px;
}
</style>
</head>
<div class="bodydiv">
<header>
<div class="header">
<div class="backinfo">
</div>
<div class="digitalbay">
<h1>Digital Bay</h1>
</div>
<div class="nav">
</div>
</header>
<body>
<div class="bodycontent">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
</div>
</body>
</div>
<aside>
<div class="extrainfo">
</div>
<div class="slideshow">
</div>
</aside>
<footer>
<div class="footer">
</div>
</footer>
</html>
In the elements above, where my <div class=digitalbay>element is located when compiled, the <h1>element nested in the div is too low in the element when compiled. I was wondering if there is a way to make it higher up the div. I already tried changing the margin, but it moves the div up along the page and that doesn't help.
Set a margin on the h1 and it will move up. Example:
h1 {
margin-top: 0.25em;
}
Your .header div has a top: 490px. That is why it is so low.
On other note, here's a bit of feedback on your CSS and HTML.
Never put the <body> tag inside a <div>... it is always supposed to be right after the <head> tag. When the browser parses the HTML, it'll auto correct that for you, but you will have bugs if you start expecting your body tag to be where it is now.
Don't write your CSS as follow div.className. Instead, simply use the class name without the element: .className. This will reduce specificity and make it easier to maintain as it grows. It'll also dramatically reduce your typing.
I don't know what your goal is in the end with this page, but it may be easier to not use position: absolute everywhere. Use position: relative instead.
In HTML, there is a tag called <main>. There can only be one per page, and I use it instead of your <div class="bodydiv">.
You are using <header> and <footer> and putting a <div> inside of it with a class of header and footer... Remove that and put your class directly on the <header> and <footer> tag.
Inside your <div class="bodycontent">, you could use the <section> tag instead of DIVs (if it is semantically correct in your case).
Related
I'm a newbie and trying to figure out how to stack these two boxes on top of each other when the browser gets resized. I don't want to use float, I'd rather stick to inline-block unless anyone else has strong suggestion against it. I was thinking I guess in using inline-block that the boxes would stack when the div got resized with the browser but it isn't happening. The boxes are just getting skinner and skinner and the text just wraps and exceeds the box. `
.cp2_maincontainer {
width: 100%;
height: 300px;
font-size: 0;
display: flex;
justify-content: space-between;
padding: 10px 50px 20px 50px;
}
.cp2_container {
width: 47%;
height: 100%;
background: no-repeat center;
display: inline-block;
position: relative;
}
.cp2_subcontainer {
background-color: rgba(211, 211, 211, .8);
height: 100%;
width: 100%;
padding: 10px 15px;
font-size: 16px;
font-family: playfair display;
position: absolute;
outline: solid 2px darkgrey;
outline-offset: -10px;
}
.cp2_subcontainer ul {
margin-left: 20px;
}
.cp2_subcontainer p {
margin: 10px;
}
.cp2_subcontainer h3 {
padding: 10px 0;
}
.cp2_container2 {
background-color: darkgrey;
background: no-repeat center;
width: 47%;
height: 100%;
display: inline-block;
position: relative;
}
.cp2_subcontainer2 {
background-color: rgba(211, 211, 211, 0.8);
height: 100%;
width: 100%;
padding: 10px 15px;
font-size: 16px;
font-family: playfair display;
position: absolute;
outline: solid 2px darkgrey;
outline-offset: -10px;
}
.cp2_subcontainer2 ul {
margin-left: 20px;
}
.cp2_subcontainer2 p {
margin: 10px;
}
.cp2_subcontainer2 h3 {
padding: 10px 0;
}
.addtextarea {
color: black;
padding: 10px;
width: 100%;
font-size: 16px;
text-align: justify;
}
<div class="cp2_maincontainer">
<div class="cp2_container" style="background-image:URL(<?php the_field('imageleft'); ?>)">
<div class="cp2_subcontainer">
<h3 style="text-align:center;">Title for Text Box 1</h3>
<p>Text in box # 1</p>
</div>
</div>
<div class="cp2_container2" style="background-image:URL(<?php the_field('imageright'); ?>)">
<div class="cp2_subcontainer2">
<h3 style="text-align:center;">Title for Text Box 2</h3>
<p>Text in box #2</p>
</div>
</div>
</div>
<div class="sectionbreak" align="center"></div>
You gave the divs a width in percentage. That means that as their container grows smaller, so do they, and they never have a reason to break. The obvious solution is to give them a fixed width (px, em).
If for some reason you need the percentages to work up to a certain point (for the purpose of bigger screens for example), two options come to mind:
Give the divs a min-width, so that once they hit that width the percentages will be ignored and the line will break.
Using media queries, define a different width for them based on screen size.
.cp2_maincontainer {
width:100%;
height:300px;
font-size: 0px;
display:flex;
justify-content: space-between;
padding: 10px 50px 20px 50px;
}
.cp2_container {
width:47%;
height:100%;
background: no-repeat center;
display:inline-block;
position: relative;
}
.cp2_subcontainer {
background-color: rgba(211, 211, 211, 0.8);
height:100%;
width:100%;
padding:10px 15px;
font-size:16px;
font-family: playfair display;
position: absolute;
outline:solid 2px darkgrey;
outline-offset: -10px;
}
.cp2_subcontainer ul{
margin-left:20px;
}
.cp2_subcontainer p{
margin:10px;
}
.cp2_subcontainer h3{
padding:10px 0px;
}
.cp2_container2 {
background-color: darkgrey;
background: no-repeat center;
width:47%;
display:inline-block;
position: relative;
min-width: 300px;
position: absolute;
right: 0;
height:300px;
}
.cp2_subcontainer2 {
background-color: rgba(211, 211, 211, 0.8);
height:100%;
width:100%;
padding:10px 15px;
font-size:16px;
font-family: playfair display;
position: absolute;
outline:solid 2px darkgrey;
outline-offset: -10px;
}
.cp2_subcontainer2 ul{
margin-left:20px;
}
.cp2_subcontainer2 p{
margin:10px;
}
.cp2_subcontainer2 h3{
padding:10px 0px;
}
.addtextarea {
color: black;
padding: 10px;
width: 100%;
font-size: 16px;
text-align: justify;
}
<div class="cp2_maincontainer">
<div class="cp2_container" style="background-image:URL(<?php the_field('imageleft'); ?>)">
<div class="cp2_subcontainer">
<h3 style="text-align:center;">Title for Text Box 1</h3>
<p>Text in box # 1</p>
</div>
</div>
<div class="cp2_container2" style="background-image:URL(<?php the_field('imageright'); ?>)">
<div class="cp2_subcontainer2">
<h3 style="text-align:center;">Title for Text Box 2</h3>
<p>Text in box #2</p>
</div>
</div>
</div>
<div class="sectionbreak" align="center">
</div>
I think this is what you are trying to accomplish.
I have added/edited the following on .cp2_container2
min-width: 300px;
position: absolute;
right: 0;
height:300px;
You need a min-width in order to have the 2 boxes overlap, otherwise they will always be half the width of the page and never overlap.
Positioning absolutely allows the div to freely pass over the statically positioned one.
Right just tells the div to position at the right edge of whatever it is relative to, in this case the body.
By positioning absolutely the height 100% becomes relative to the entire window, I have solved by using a pixel height, although you could also position the cp2_maincontainer relative and given it a height, making the height 100% of cp2_container2 relative the height of cp2_maincontainer.
Good luck.
I am trying to get the "ChatBox" to float to the right side of the <main> tag, opposite side of Box1 and NavBox.
If I remove either Box1 or NavBox then it works. Otherwise I can only get it to the bottom of the page (when "ChatBox" is after the <main> tag), or to the right (when before the <main> tag), but it won't go to the top of the <main> box, it will start about 200px down.
The only HTML that can be changed is to move "ChatBox" about the <main> tag. Mostly has to done using CSS only.
http://jsfiddle.net/8em3m60m/26/
CSS
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background:#000;
font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color:#c2c2bd;
}
#wrapper {
clear:left;
max-width:999px;
min-height:100%;
margin:0 auto;
border:0;
text-align:left;
}
.mainnav, .box-1 {
float:left;
clear: left;
vertical-align:top;
width:180px;
height:200px;
margin: 18px 0 0 8px;
}
.chatbox {
float:right;
vertical-align:top;
width:196px;
min-height:200px;
}
.main {
min-height:550px;
padding-top: 40px;
background: #7d7e7d;
margin-top:100px;
}
.main-1{
width: 548px;
margin-left:194px;
min-height:250px;
background-color: #3f3f3f;
padding:6px;
}
HTML
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
<div id="chatbox" class="chatbox">ChatBox</div>
</div>
EDIT: The only possible HTML change I can make is to move the ChatBox above, or below, the <main> tag.
Using Absolute Positioning
If you want to keep the HTML as you presented, you can use absolute positioning as follows.
You need to apply position: relative to #wrapper and then use suitable top and right offsets for .chatbox.
You need to specify a width or min-width to the wrapper or else you will get
some overlapping with the absolutely positioned element.
This solution may work but it depends on your other requirements regarding flexibility and responsiveness.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background: #000;
font: normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color: #c2c2bd;
}
#wrapper {
clear: left;
width: 999px;
min-height: 100%;
margin: 0 auto;
border: 0;
text-align: left;
position: relative;
}
.mainnav,
.box-1 {
float: left;
clear: left;
vertical-align: top;
width: 180px;
height: 200px;
margin: 18px 0 0 8px;
outline: 1px dotted yellow;
}
.chatbox {
vertical-align: top;
width: 196px;
min-height: 200px;
outline: 1px dotted yellow;
position: absolute;
right: 8px;
top: 18px;
}
.main {
min-height: 550px;
padding-top: 40px;
background: #7d7e7d;
margin-top: 100px;
outline: 1px dashed yellow;
}
.main-1 {
width: 548px;
margin-left: 194px;
min-height: 250px;
background-color: #3f3f3f;
padding: 6px;
}
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
<div id="chatbox" class="chatbox">ChatBox</div>
</div>
Without restructuring your HTML (which I would strongly suggest; it's a little unsemantic and nonsensical), you can achieve what you're looking for this way:
JSFiddle Example
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background:#000;
font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color:#c2c2bd;
}
#wrapper {
max-width: 999px;
min-height: 100%;
margin: 0 auto;
}
.box-1, .mainnav {
float: left;
clear: left;
width: 180px;
height:200px;
vertical-align:top;
margin: 18px 0 0 8px;
}
.chatbox {
float:right;
position: relative;
top: -200px;
vertical-align:top;
width:196px;
min-height:200px;
}
.main {
min-height: 550px;
padding-top: 40px;
background: #7d7e7d;
margin-top: 100px;
}
.main-1 {
width: 548px;
margin-left: 194px;
min-height: 250px;
background: #3f3f3f;
padding: 6px;
}
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<div id="chatbox" class="chatbox">ChatBox</div>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
</div>
I've moved your .chatbox element above .main, and have given it position: relative; and moved it 200px above the top position of where it would normally be, so that it is in line with Box 1. A better way to do this that doesn't require the position property would be to wrap .box-1 and .nav in a containing element, float the containing element left, and then move the .chatbox element above the .main element and float it right.
I usually would have used position:absolute for having the chatbox align on the right at the top. Your CSS would be;
.chatbox {
position:absolute;
top: 0;
right: 0;
width:196px;
min-height:200px;
}
This will align it to the top-right of the parent element of the chatbox.
Here is my HTML:
<body>
<nav>
<div id="navBar">
<ul>
<li>ESILEHT</li>
<li>UUDISED</li>
<li>ÜLEVAATED/ARVUSTUSED</li>
<li>LOGI SISSE</li>
</ul>
</div>
</nav>
<div class="content">
<div id="logo">
<img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
</div>
<div id="tervitus">
<h3 id="tere">TERE TULEMAST</h3>
</div>
</div>
<div class="artikkel">
<p>check check</p>
</div>
<footer>©2014 Janno.</footer>
</body>
</html>
Here is my CSS:
#navBar{
width: 100%;
float: left;
position: absolute;
top: 0;
background-color: #000000;
left: 0;
min-width:760px;
}
#navBar ul{
list-style:none;
margin: 0 auto;
}
#navBar li{
float: left;
}
#navBar li a:link , a:visited{
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px "open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover{
background-color: #F0F0F0;
color: #000000;
text-decoration: none;
}
#logimine{
}
body{
margin: 15px;
padding: 15px;
background-color: #F0F0F0;
min-width: 700px;
}
.content, .artikkel{
max-width: 65%;
margin: 1em auto;
box-shadow: 0 3px 7px rgba(0,0,0,.8);
background-color: #ffffff;
padding: 3em;
padding-bottom: 350px;
margin-bottom:50px;
}
#tervitus{
background-color: black;
color: white;
font: 18px "open sans", sans-serif;
font-weight: bold;
}
#tere{
margin-left: 5px;
}
#logo{
}
#regnupp{
color: blue; /*miks see valge on muidu*/
}
.uudised{
max-width: 65%;
margin: 4em auto;
box-shadow: 0 3px 7px rgba(0,0,0,.8);
background-color: #ffffff;
padding: 3em;
padding-bottom: 350px;
margin-bottom:50px;
}
.uudised{
padding-left: 115px;
}
.uudised img{
float: left;
width: 100px;
margin-left: -75px;
}
.uudised p, h2{
margin-left: 50px;
}
.uudised hr{
margin-top: 50px;
margin-bottom: 50px;
}
footer {
text-align: center;
margin: 0 auto -40px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
font-weight:300;
color:#ffffff;
background-color:#000000;
}
If I understand correctly, the <footer>, when using width: 100%; looks like the width of the <body> element, so I tried quite a few things and nothing. This is my first try at a webpage, so is there anything I can do, to have the <footer> use the entirety of the page width, without drastically changing everything?
Make sure that firstly your css is set up properly such as:
body {
margin: 0;
}
then your footer css should be something like this:
.footer {
margin: 0;
width: 100%;
height: 120px;
background-color: red;
}
This should work obvious then your html should be something like:
<html>
<body>
<div class="footer">
</div>
</body>
</html>
Hope this helps!
JsFiddle
I added extra styles to the JSFiddle for presentation and proof, but the code works the same without.
Do this:
HTML
<body>
<footer>Hi</footer>
</body>
CSS
html,body{
width:100%;
height:100%;
marging:0;
}
footer{
height:120px;
width:100%;
position:absolute;
bottom:0;
}
Block level elements
To understand this issue you need to understand about display:block. Block level elements (elements which declare display:block) by default take up the full width of their containing element.
In this case, the footer is, in all newish browsers, a block level element, and so will take up the full width of its container, in this case the body. There is no need to set width:100%;
Older browsers
In older browsers, the newer HTML5 elements, including block, are inline by default, so you need to set them to be block level in your CSS, like so:
footer {
display:block;
}
This is good practice.
Floats
There are several things which can get in the way of this behaviour, notably floats. If you float an element, to the left or right, it will become as narrow as it possibly can, while still enclosing it’s contents. This may or may be your issue here.
Do please post your code.
set footer width to viewport width width: 100vw;, and add the viewport meta tag to your header:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
There is a good full width and sticky to bottom (if you need) solution:
<div class="content">
<!-- content here -->
<div class="hfooter">
<!-- For Content not to lay under the Footer -->
</div>
</div>
<div class="footer">
<!-- footer content here -->
</div>
and CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.content {
height: 100%;
}
.hfooter {
height: 100px;
}
.footer {
height: 100px;
margin-top: -100px;
}
Hope it is that what you need)
DEMO here: http://jsfiddle.net/verber/63gbg/11/
I have HTML
<div class="mainwraper" style="width:100%;">
<div class="header1">
div logo left <img src="logo"> // - it sends it pasted to the left sidebar
div class right // it send it pasted to the right sidebar
</div> // need to center them in the page and keep the repeative effect
<div class="header2" style="width:100%;">
<div class="headbar">
<ul class="menu" style="background:#0099CC;"> … </ul>
</div>
</div>
</div>
CSS
.mainwraper {
margin:0 auto;
}
.header1 {
float:left; width:100%; height:78px; margin-top: 10px;
}
.header2 {
float:left;
width:100%;
position:relative;
z-index:auto;
height:52px;
margin-top:20px;
background: #000;
opacity: 0.65;
border-radius: 10px;
}
.headbar {
background-color: inherit;
float: left;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
border-radius: 10px;
}
.menu {
background-color: inherit;
background-image:url(images/menugradient.png);
float: left;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}
I want it to look like this [1]: http://postimg.org/image/hi7knv1tp/ "tooltip"
but it looks something like this [2]: http://postimg.org/image/ptqdhlfyv/ |tooltip".
I also want to mention that after i have another Div class main wrapper of 972px that is centered correctly.
you can use margin:0 auto; to center your navigation
The following is my CSS code:
<style type="text/css">
body {
background-color:#FFF;
font-weight:bold;
font-size:12pt;
font-family:Arial,sans-serif;
}
.container {
width: 800px;
margin: 0 auto;
}
#header {
text-align: left;
padding-top: 220px;
font-size: 60pt;
}
#subheader {
text-align:left;
font-size: 15pt;
color: #666;
margin-top: -5px;
margin-bottom: 15px;
}
#email {
width: 165px;
height: 25px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align:center;
border: 2px solid;
color: #666;
border-color: black;
}
input[type=submit] {
height: 30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #000;
border-color: #fff;
color: #fff;
}
#socialMedia {
padding-top: 60px;
text-align:center;
}
#video {
padding-left: 600px;
margin-top: -260px;
}
</style>
The HTML divs are divided as follows:
<div class="container">
<div id="header">
<Content>
</div>
<div id="subheader">
<Content>
</div>
<Form Input Field>
<div id="video">
<Embedded Video>
</div>
<div id="socialMedia">
<Social Media Image Links>
</div>
</div>
</body>
</html>
The issue I'm having with this is that while the page attempts to center itself with browser rescale, only the left side of the content is really adjusting. The right side essentially hangs on to the edge of the page, thereby not centering it.
Any suggestions? I tried this using Chrome.
This may be the problem:
#video {
padding-left: 600px;
margin-top: -260px;
}
I'm not sure what size the video container is but maybe this is why it is not centering properly with everything else.
When you use this CSS instead, what happens?
#video {
text-align:right;
margin-top: -260px;
}
Maybe I'm misunderstanding what the problem is. Could you send a screenshot of the issue?
Try setting a max-width on the container:
.container {
max-width: 800px;
margin: 0 auto;
}
Here's a demo: http://jsfiddle.net/Ltf5U/