i'm doing a project for learning purpose. i have a problem of getting left and right div's inside the main div. if anyone can point me out where is the problem in the code it will be most appreciated. thank you
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="template/css/test_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_wrapper">
<div class="wrapper">
<div class="head"></div>
<div class="nav"></div>
<div id="main">
<div class="left">some data</div>
<div class="right">some data</div>
</div><!--end main-->
<div class="footer">
</div><!--end footer-->
</div><!--end wrapper-->
</div><!--end main_wrapper-->
</body>
</html>
CSS code
#charset "utf-8";
/* CSS Document */
body,td,th {
font-family: Arial, Helvetica, sans-serif;
margin-top:0px;
background-color:#FF0000;
}
#main_wrapper {
width:950px;
margin:auto;
background-image: url(../images/bg_a.png);
background-repeat:repeat-y;
}
.wrapper {
background-color:#009900;
margin-left:5px;
margin-right:5px;
}
.head {
height:115px;
}
.nav {
height:30px;
}
#main {
padding:10px;
margin:5px;
background-color:#0099FF;
}
.left {
width:600px;
float:left;
}
.right {
width:300px;
float:right;
}
.footer {
height:50px;
}
try this:
#main {
padding:10px;
margin:5px;
background-color:#0099FF;
overflow: hidden;
}
Related
I've created a basic HTML page layout with 3 divs. The third div (sidebar) meant float to top right but it floats on the right but under the 1st div.
Does anyone know where I am going wrong?
So the green div (sidebar) should float to top right when the window is maximised, and if the window is resized, it should float on the right under the div 1 and alongside div 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles1.css" type="text/css" />
<style type="text/css">
.page {
width:90%;
}
.div1 {
width: 750px;
background-color: gray;
float:left;
}
.div2 {
width: 60%;
background-color: blue;
float:left;
}
.sidebar {
width: 30%;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="page">
<div class="div1">
<p>div1</p>
</div>
<div class="div2">
<p>div2</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
</body>
</html>
consider this code snippet, I switched the '.div2 'and '.sidebar' positions
.page {
width:90%;
}
.div1 {
width: 750px;
background-color: gray;
float:left;
}
.div2 {
width: 60%;
background-color: blue;
float:left;
}
.sidebar {
width: 30%;
background-color: green;
float: right;
}
<div class="page">
<div class="div1">
<p>div1</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="div2">
<p>div2</p>
</div>
</div>
You can use CSS Grid Layout system. https://www.w3schools.com/css/css_grid.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles1.css" type="text/css" />
<style type="text/css">
.page {
width:90%;
float:left;
display: grid;
grid-template-areas:
'header header sidebar'
'main main sidebar';
}
.div1 {
grid-area: header;
width: 100%;
background-color: gray;
float:left;
padding:7px;
color:#fff;
}
.div2 {
grid-area: main;
width: 100%;
background-color: blue;
float:left;
padding:7px;
color:#fff;
}
.sidebar {
grid-area: sidebar;
width: 100%;
background-color: green;
float: left;
padding:7px;
color:#fff;
}
</style>
</head>
<body>
<div class="page">
<div class="div1">
<p>div1</p>
</div>
<div class="div2">
<p>div2</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
</body>
</html>
Hi guys i have a problem with overlap this is a full header with a background image and i have some content also a button but is pushing out of header,how i can fix this?
What i am trying to do is full header with a background but i am stuck here.
Thank you for helpLook what is the problem
html, body {
height: 100%;
padding:0;
margin:0;
}
h1{
margin:0;
}
.wrap{
margin:0 auto;
width:950px;
height:100%;
}
header {
background:url("https://unsplash.com/#aidanjjmeyer?photo=ckrUhWyTde8");
background-size:cover;
background-repeat:no-repeat;
width:100%;
height:100vh;
}
.text{
text-align: Center;
position: relative;
top: 50%;
}
.menu{
padding-top:30px;
}
.bar1 , .bar2 , .bar3{
width:35px;
height:3px;
background-color:#262626;
margin:6px 0;
}
.btn{
border:1px solid aqua;
background:transparent;
font-size:25px;
color:white;
outline:none;
}
#about{
height:300px;
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="custom.css">
<title>Journal</title>
</head>
<body>
<header>
<div class="wrap">
<div class="menu">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="text">
<h1>Brooke Journalist</h1>
<button class="btn">Contact</button>
</div>
</div>
</header>
<section id="about">
</section>
</body>
</html>
I have the menu on the bottom of the page, and I'm trying to center the wrapper div
with logo and buttons inside the doc. The centering doesn't work. Can you guys tell me why?
I want the logo to float to the left, and buttons to float to the right, but the wrapper div must be centered.
Here's the code:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
To center a block level element horizontally, the easiest method is to apply a width and set margin-left and margin-right to auto (or margin: auto; or margin: 0 auto;).
Since you already have a width on .navigation, just apply margin: auto to .navigation and it will center horizontally.
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin: auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
By default html elements are left aligned. (like your .navigation)
if you add a margin:auto on a block element(note: wrapper div is a block element) it will add up the remaining space to the viewport and add a left-margin and right-margin to the block element, so it will look centered.
So, giving a margin:auto styling to the wrapper div will do the job.
just like this:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin:0 auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
html {
font-family: 'Open Sans', sans-serif;
}
body {margin: 0;
padding: 0;
}
#wrapper {
padding-left:50px;
padding-top:30px;
}
#third, fifth {
background-color:#E8E8E8 ;
}
img[src^="my_menu.png"] {
z-index:10;
}
#second, #third, #fourth, #fifth {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
background-color:white;
z-index:-1;
}
#second {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
margin-top:100vh;
}
#fourth, #second {
background-color:grey;
}
<!DOCTYPE html>
<html>
<head>
<title>Add gospel Přerov</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
<div id="fift">
</div>
</div>
</body>
</html>
I am making a website for my client, and I need help. I want to make 4 divs with height of 100vh, and with width equals to 100%. That's what I have. Now, I need to put arrow facing down to all of these divs, somewhere at the bottom center. How to do it?
I'm not sure if this is what you want, but according to your question, this might be what you want to achieve. Just created a div with an image inside (you can also use background property for arrow image)
html * {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.full {
position: relative;
height: 100vh;
width: 100%;
}
.full:nth-child(1) {
background: cyan;
}
.full:nth-child(2) {
background: magenta;
}
.full:nth-child(3) {
background: yellow;
}
.full:nth-child(4) {
background: lightgray;
}
.arrow-down {
position: absolute;
bottom: 10px;
width: 32px;
height: 32px;
left: calc(50% - 16px);
}
.arrow-down > img {
width: 100%;
}
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>
I built a menu but for some reason the left side of the menu drops when the browser is re-sized and when this happens the bottom border disappears. Is there any way to stop this from happening and just have the whole menu scale until it reaches a certain size?
heres my CSS:
#charset "utf-8";
/* Main CSS Document */
#parent{
padding: 0px, auto;
width: 50%;
min-width:50%;
height: 50px;
margin-top:3%;
margin-left: 25%;
margin-right: 15%;
background: #FFF;
border-bottom:thin groove #000;
}
#child-left{
float: left;
padding-left:25px;
width: 35%;
min-width:35%;
height: 50px;
background: #FFF;
}
#child-right{
padding-top: 15px;
padding-right:20px;
float: right;
width: 60%;
min-width:60%;
height: 35px;
background: #FFF;
}
#logoparent{
padding: 0px, auto;
width: 100%;
height: 50px;
margin-left: 15%;
margin-right: 15%;
background: #FFF;
}
#menu{
float:right;
padding-right:7%;
font-family:"Courier New", Courier, monospace;
font-size:18px;
font-weight:600;
color:#666666;
}
#menuend {
padding-right:10px;
float:right;
font-family:"Courier New", Courier, monospace;
font-size:18px;
font-weight:600;
color:#666666;
}
#menu:hover{
color:#C30;
}
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mainstylesheet.css" />
<title>Home</title>
</head>
<body>
<div id="parent">
<div id="child-left"><img name="Logo" src="" width="100%" height="100%" alt="" /></div>
<div id="child-right">
<div id="menupad">
<div id="menuend"> Contact </div>
<div id="menu"> Gallery </div>
<div id="menu"> About </div>
<div id="menu"> Home </div>
</div>
</div>
</div>
</body>
</html>
Any help is greatly appreciated!
Ok so I saw your design and couldn't decipher all the % you are using in your css (my bad) so i started from scratch and tried to match your design. I hope you can adjust it to your linking. Here it is:
See jsFiddle
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mainstylesheet.css" />
<title>Home</title>
</head>
<body>
<div id="parent">
<div id="child-left">
<img name="Logo" src="" width="200px" height="50px" alt="" />
</div>
<div id="child-right">
<div id="menupad">
<div id="menuend"> Contact </div>
<div id="menu"> Gallery </div>
<div id="menu"> About </div>
<div id="menu"> Home </div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* Main CSS Document */
#parent{
max-width: 900px;
margin: 0 auto;
border-bottom:thin groove #000;
}
#child-left{
float: left;
height: 50px;
}
#child-right{
float: right;
height: 50px;
line-height: 80px;
vertical-align: bottom;
}
#logoparent{
height: 50px;
}
#menu{
float:right;
font-family:"Courier New", Courier, monospace;
margin-left: 10px;
}
#menuend {
float:right;
font-family:"Courier New", Courier, monospace;
margin-left: 10px;
}
.clear{
clear: both;
}