HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Dummy Site | Home</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<img src="https://i.imgur.com/MPoWmYb.png"></img>
<h1>Title</h1>
<h3>This is my description</h3>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</header>
<section id="frontImage">
<div class="frost">
<h3></h3>
</div>
</section>
<footer>
<p>Name, 2018</p>
</footer>
</div>
</body>
</html>
CSS:
body{
font:15px/1.5 Arial, Helvetica, sans-serif;
padding:0;
margin:0;
background-color:gray;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
height: 100%;
text-align: center;
}
/* Global */
.container{
width: 80%;
margin:auto;
overflow:hidden;
}
ul{
margin:0;
padding:0;
}
/* Header and logo */
header{
top:0;
color:#ffffff;
background: inherit;
box-shadow: inset 0 0 0 200px rgba(0,0,0,0.75);
}
header #branding{
text-align: center;
}
header #branding h1{
min-width: 200px;
margin-left: 43.5%;
margin-right: 43.5%;
margin-bottom: 5px;
border: solid 4px #ffffff;
}
header #branding h3{
margin-top:0;
}
header nav{
text-align: center;
margin-bottom: 10px;
}
header li{
padding: 0 30px 0 30px;
display: inline;
}
header li a{
font-family: Verdana;
font: bold;
text-decoration: none;
color:#ffffff;
}
header li:hover{
border: 2px solid #ffffff;
}
header #branding img{
border: solid 2px #ffffff;
top:1%;
left: 3%;
width:130px;
height:130px;
position: absolute;
}
.frost{
top: 16.5%;
left:0;
text-align: center;
color:#ffffff;
width:40em;
height:47.65em;
position:absolute;
background: inherit;
overflow: hidden;
margin: 0px auto;
z-index: 1;
}
.frost:before{
position: absolute;
top: -20px;
left: -70px;
bottom: 0;
z-index: 0;
width: 200%;
height: 200%;
background-position: 50% 0;
content: "";
box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.1);
filter: blur(25px);
z-index: -1;
}
footer{
position: absolute;
bottom: 0;
height:4.55em;
width: 100%;
color:#ffffff;
text-align: center;
background: inherit;
box-shadow: inset 0 0 0 200px rgba(0,0,0,0.75);
}
Codepen example: https://codepen.io/anon/pen/dQeeRG
Hi all,
I'm currently building a website, however I can't seem to get it to resize dynamically with the browser window (Chrome).
I've tried using positioning as well as having a container set to 80% and margins on the elements etc. but things like the logo don't resize and the "frost" element doesn't adjust whatsoever.
I'm trying to do this without Javascript for the time being as I'm learning that on the side.
Just to note, function of .frost is just to display a frosted glass effect.
Any advice/suggestions are welcome.
It is not clear to me what do you want to get exactly, but the problem of this layout is the absolute width of the class .frost, i.e. 40em. Delete it or change it to 100% and then you get a responsive layout.
Related
I just created a nav-bar and a little main section in the page but the issue here is that there is a space between the nav-bar and the main section without any margins or padding existing between them.
/*this is a universal selector to clear the padding and margin*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
/*[starting the style of the nav bar]*/
/*this is the style fot the whole nav bar*/
nav{
background-color: black;
box-shadow: 5px 5px 20px;
position: fixed;
top: 0;
width: 100%;
height: 8%;
outline: auto;
}
/*this is the containing block for all the list items in the nav*/
nav ul{
margin: auto;
text-align: center;
outline: solid rgb(247, 5, 5) 4px;
}
/*this is the style for the each one of the list items*/
nav li{
display: inline;
padding: 20px;
margin: 30px;
outline: solid green 4px;
}
/*the style for the text in the list items of the nav*/
nav a{
display: inline-block;
padding: 20px;
font-weight: 900;
color: white;
text-decoration: none;
outline: solid yellow 7px;
}
/*[starting the style of the main section]*/
main{
text-align: center;
background-image: url(code1.jpg);
background-repeat: no-repeat;
background-size: cover;
outline: solid black 7px;
width: 100%;
/*height: 600px;*/
color: white;
/*border: solid blue 1px;*/
}
main > h1 {
font-size: 60px;
margin: 160px;
}
main > h2{
font-size: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>
ammar eneen
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--this is the horizontal nav bar at the top of the page-->
<nav>
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>ORDER</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<!--this is the main section at the home page right under the nav bar-->
<main>
<h1>
welcome to <br><span style="text-shadow: 3px 3px rgb(221, 8, 8)">EYD</span>
</h1>
<h2>best web-developing service</h2>
<p>order your own service now <span>ORDER</span></p>
<p>if this is your first time here check <span>HOW IT WORKS</span></p>
</main>
<section>
</section>
</body>
</html>
You said you don't have any margin. But you have
main > h1 {
font-size: 60px;
margin: 160px;
}
That 160px margin is the one you see as a 'space' between nav and main. Change it to margin: 0 160px 160px 160px to remove it from 'top'.
If you want to add a 'space' to the top of your main , use padding-top:160px on main
Added a red bck color to main for example purposes.
/*this is a universal selector to clear the padding and margin*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
/*[starting the style of the nav bar]*/
/*this is the style fot the whole nav bar*/
nav{
background-color: black;
box-shadow: 5px 5px 20px;
position: fixed;
top: 0;
width: 100%;
height: 8%;
outline: auto;
}
/*this is the containing block for all the list items in the nav*/
nav ul{
margin: auto;
text-align: center;
outline: solid rgb(247, 5, 5) 4px;
}
/*this is the style for the each one of the list items*/
nav li{
display: inline;
padding: 20px;
margin: 30px;
outline: solid green 4px;
}
/*the style for the text in the list items of the nav*/
nav a{
display: inline-block;
padding: 20px;
font-weight: 900;
color: white;
text-decoration: none;
outline: solid yellow 7px;
}
/*[starting the style of the main section]*/
main{
text-align: center;
background-color:red; /* added for example purposes */
background-image: url(code1.jpg);
background-repeat: no-repeat;
background-size: cover;
outline: solid black 7px;
width: 100%;
/*height: 600px;*/
color: white;
/*border: solid blue 1px;*/
}
main {
padding-top:160px; /* add this*/
}
main > h1 {
font-size: 60px;
margin: 0 160px 160px 160px; /* change this*/
}
main > h2{
font-size: 50px;
}
<html>
<head>
<title>
ammar eneen
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--this is the horizontal nav bar at the top of the page-->
<nav>
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>ORDER</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<!--this is the main section at the home page right under the nav bar-->
<main>
<h1>
welcome to <br><span style="text-shadow: 3px 3px rgb(221, 8, 8)">EYD</span>
</h1>
<h2>best web-developing service</h2>
<p>order your own service now <span>ORDER</span></p>
<p>if this is your first time here check <span>HOW IT WORKS</span></p>
</main>
<section>
</section>
</body>
</html>
Set the nav height to auto, and you can play with the padding to add spacing....
nav{
background-color: black;
box-shadow: 5px 5px 20px;
position: fixed;
top: 0;
width: 100%;
padding: 10px;
height: auto;
outline: auto;
}
https://jsfiddle.net/c8woj40v/
I apologize in advance if this is answered somewhere but I've tried looking and found nothing (I think it's the way I'm wording it, I'm not sure how...) but basically how links are directed to an 'iframe'-I want mine directed to a DIV instead, is this possible? If so, how? I've tried a few ways that I thought would work but have failed...
The site is here and I basically want the links info to go into the black div box when clicked.
My code:
body{
background-color: #e2e2e2;
}
#container {
max-width: 900px;
margin: 0 auto;
padding: 10px;
}
#mainbox {
width: 100%;
height: 650px;
background-color: white;
margin: 0 auto;
margin-top: 135px;
}
#title{
font-family: 'Open Sans Condensed', sans-serif;
font-size: 35px;
position:fixed;
top: 105px;
color: #e8c8c5;
text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
.nav{
border:1px solid #ccc;
border-width:1px 0;
border-color: #e8c8c5;
list-style:none;
margin:0;
padding:0;
text-align:center;
text-decoration:none;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
text-decoration:none;
font-family: verdana;
font-size: 12px;
color: #e8c8c5;
}
#content{
background-color: black;
width: 860px;
height: 580px;
margin: 0 auto;
margin-top: 6px;
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="title">Commissions;</div>
<div id="mainbox">
<ul class="nav">
<!--nav starts here -->
<li>About</li>
<li>Information</li>
<li>Examples</li>
<li>Clients</li>
<li>Faq</li>
</ul>
<!-- nav ends here -->
<div id="content">
</div>
</div>
</div>
</body>
</html>
So I cant find a way to keep this navbar in my website from automatically putting itself over top of a header image! I try setting the navbar's position to relative, but that doesn't do anything! I wanna keep my header image's position to be both top and left 0, but without setting the images position to absolute, I cannot get the image to stay at 0 top and left on the screen!
body {
font-family: Roboto;
background-color: #F0F0F0;
}
.header-img {
position: absolute;
background-repeat: no-repeat;
top: 0px;
left: 0px;
}
.navbar ul {
list-style-type: none;
color: white;
position: relative;
}
.navbar ul li {
border: 1px solid black;
padding-right: 2em;
padding-left: 2em;
display: inline;
}
<!DOCTYPE html>
<head>
<title>Official Rusty Ohio Server</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<img src="rusty ohio background.png" class="header-img" width="100%" height="95%">
<nav class="navbar">
<ul>
<li>Plugins</li>
<li>Server Status</li>
<li>Donate</li>
</ul>
</nav>
</body>
</html>
try this in css
.navbar{
position: absolute;
z-index: 11;
}
.header-img{
z-index:10;
}
I would recommend using a background image which will give you more control over the image re-sizing respective to your container. You can implement something like below to achieve what you want.
body {
font-family: Roboto;
background-color: #F0F0F0;
}
#header-wrapper {
width: 100%;
height: 50px;
}
.header-img {
float: left;
width: 100px;
margin: 0px;
height: 100%;
background-image: url("http://cdn6.bigcommerce.com/s-kjbnzo2/products/12634/images/13240/LP_8206__81949.1444680903.500.500__96128.1446754363.1280.1280.jpg?c=2");
background-repeat: no-repeat;
background-size: auto 100%;
top: 0px;
left: 0px;
}
.navbar {
float: left;
width: 80%;
}
.navbar ul {
list-style-type: none;
color: white;
position: relative;
}
.navbar ul li {
border: 1px solid black;
padding-right: 2em;
padding-left: 2em;
display: inline;
}
<div id="header-wrapper">
<div class="header-img"></div>
<nav class="navbar">
<ul>
<li>Plugins</li>
<li>Server Status</li>
<li>Donate</li>
</ul>
</nav>
</div>
I am adding some pictures to a website I am building for a client, and for some reason some of the pictures underlap other pictures when i change the resolution, and some don't. I am adding all the pictures the same way so I am a little confused as to why some are positioned staticly.
HTML PICTURES
<!DOCTYPE HTML>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<title>Jay Cousins</title>
<link rel="stylesheet" href="css/site.css" type="text/css">
</head>
<body>
<div id="header">
<img id="papa" src="newImages/papaPic.jpg">
<img id ="jaytext" src="newImages/jaycousins.png">
<img id ="darkTextBackground" src="newImages/darktextbackgroubd.jpg">
<img id ="commercialtext" src="newImages/commercialtext.png">
<img id ="leftsidebackground" src="newImages/leftsidebackground.jpg">
<ul>
<li class="selected">
home
</li>
<li>
Opportunities
</li>
<li>
Project Management
</li>
<li>
About Jay
</li>
<li>
Community
</li>
<li>
Contact
</li>
</ul>
</div>
CSS
body {
background: url(../newImages/headerBackground.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
//font-size: 14px;
margin: 0;
padding: 0;
}
#header {
background: url(../images/bg-header.png) repeat-x bottom center;
margin: 0;
text-align: center;
display: block;
height:290px; //height for adjust picture
}
#papa {
display: block;
margin: 0 auto;
width: 430px;
margin-left:0px;
height:270px; //
}
#jaytext{
position: absolute;
top:5.5%;
left:31.7%;
}
#darkTextBackground{
width:550px;
height:73px;
position:absolute;
top:24.2%;
left:31.8%;
}
#commercialtext{
height:57px;
width:550px;
position:absolute;
top:23.5%;
left:29.0%;
}
#leftsidebackground{
width:300px;
height:523px;
position:absolute;
left:0%;
}
#text{
position:absolute;
top:0%;
}
#header ul {
background: url(../images/menu-border.gif) no-repeat bottom left;
margin: 0 auto;
overflow: hidden;
padding: 0 0 0px 1px;
width: 970px;
position:relative;
left:5%;
}
#header ul li {
background: url(../images/bg-menu.gif) repeat-x bottom center;
border-top: 2px solid #4f5342;
float: left;
list-style: none;
margin: 0;
}
#header ul li a {
background: url(../images/menu-border.gif) no-repeat bottom right;
color: #93958b;
display: block;
font-size: 14px;
height: 42px;
letter-spacing: 1px;
line-height: 42px;
margin: 0;
padding: 0 31px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#header ul li.selected a {
color: #4c4d3d;
background: #e5e5e5;
}
#header ul li a:hover {
color: #c0c3b4;
}
If you have fixed number of images here then wrap them in a div and set the div following properties div {-webkit-column-count: 5; /* Chrome, Safari, Opera /-moz-column-count: 5; / Firefox */column-count: 5;}
So basically I can't remove the top section of the page. It is just white space, and no matter how much I alter my css, I can't seem to change anything. I want to have my navbar at the top of the page, with no padding or border or anything. Here is my code, and I am aware it is probably the most easiest thing, it's just that i can't find it at the moment.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="Description" content="This is a test website!"/>
<meta name="author" content="Me!"/>
<title>test | Home</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<nav id="navmenu">
<ul>
<li>Home</a>
<li>About</li>
<li>Tutorials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<aside id="sidenews">
</aside>
<div id="center">
<section id="mainsection">
<article>
<header>
<hgroup>
<h1>This is a test</h1>
<h2>I like tests!</h2>
</hgroup>
</header>
<section>
<p>This is the main section of my section (sectception)</p>
</section>
<footer>
<p>Time and date</p>
</footer>
</article>
</section>
</div>
<footer id="cright">
<p>This is the copyright section. All rights reserved.</p>
</footer>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
a{
text-decoration: none;
color: #FFF;
}
a:hover{
color: #333399;
}
#wrapper{
width: 1000px;
margin: 20px auto;
text-align: left;
background-color: #FFF;
}
#navmenu{
background: #3366CC;
color: #eee;
text-align: center;
height: 100px;
padding: 0;
margin:0;
float: top;
width: 100%;
}
#navmenu li{
display: inline-block;
list-style: none;
padding: 20px;
}
#navmenu li:hover{
color: #FFF;
background: #3399FF;
border-radius: 15px;
-moz-border-radius: 5px;
}
#mainsection{
float:left;
width: 630px;
margin:30px;
margin-top: 2
background-color:#FFF;
color: #222;
text-align: left;
}
#cright{
text-align: center;
background-color: #AAA;
clear: both;
}
#center{
width: 1000px;
height: 1000px;
background-color:#FFF;
}
#sidenews{
float:right;
width: 250px;
height: 940px;
margin: 0px 0px;
padding: 30px;
background-color:#FFF;
}
Change the margin of the wrapper to 0 ?
#wrapper{
margin: 0 auto;
}
Your #wrapper element has a top margin of 20px - is that it?
#wrapper{
width: 1000px;
margin: 0 auto;
text-align: left;
background-color: #FFF;
}
Set margin to 0 on wrapper
#wrapper {
background-color: #FFFFFF;
margin: auto;
text-align: left;
width: 1000px;
}