So I have the following code for a personal website:
HTML:
<html>
<head>
<meta charset="utf-8">
<title>Name</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="jumbotron">
<div id="title-container">
<h1>Name</h1>
<h3>Interactive Resume</h3>
</div>
<div id="jumbotron-overlay"></div>
</div>
<div id="profile"></div>
</body>
</html>
And CSS:
body {
background: url(../img.jpg) no-repeat top center fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1, h3 {
color: #fff;
text-align: center;
}
h1 {
margin-top: 400px;
margin-bottom: 0px;
font-size: 62pt;
}
h3 {
margin-top: 20px;
font-size: 24pt;
}
#title-container {
width: 100%;
height: 200px;
}
#jumbotron {
margin: 0px;
padding: 0px;
width: 100%;
height: 600px; //FIXME
}
#jumbotron-overlay {
background-color: #6ACF56;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 1000px;
opacity: .5;
}
#profile {
width: 100%;
height: 640px;
background-color: white
}
I'm trying to get my "Name" and "interactive resume" inside the h tags to be on the top layer on top of the overlay, but no matter what I try it seems to be stuck behind the green overlay. I've tried using z-index but to no avail. I'm pretty new to front-end so any help would appreciated.
You need to set your #title-container to be positioned relative and adjust the z-index
#title-container {
width: 100%;
height: 200px;
position:relative; /*Updated here*/
z-index:1; /*Updated here*/
}
Here is a JSFiddle http://jsfiddle.net/2cpnb9ja/1/
z-index only works when position is set.
http://jsfiddle.net/wilchow/z4c7r70t/3/
body {
background: url(http://placehold.it/1000x1000) no-repeat top center fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1, h3 {
color: #fff;
text-align: center;
position:relative;
z-index:1000;
}
h1 {
margin-top: 400px;
margin-bottom: 0px;
font-size: 62pt;
}
h3 {
margin-top: 20px;
font-size: 24pt;
}
#title-container {
width: 100%;
height: 200px;
}
#jumbotron {
margin: 0px;
padding: 0px;
width: 100%;
height: 600px; //FIXME
}
#jumbotron-overlay {
background-color: #6ACF56;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 1000px;
opacity: .5;
z-index:500;
}
#profile {
width: 100%;
height: 640px;
background-color: white
}
Related
I have a slightly rotated div creating an asymetrical graphic on my start page. I use overflow: hidden to hide the overlap from that div. Everything uses absolute positioning to get the elements exactly where I want them and vw and vh to make it responsive. It looks great while the aspect ratio is "normal" but when the window approaches a 2 or 3:1 aspect ratio (like an ultrawide monitor) everything overlaps. Narrow aspect ratio is not a problem since I have it switch to mobile view before it becomes a problem.
I considered using overflow: auto so it wouldn't be forced to fit in the viewport but then it's possible to see the edges of the rotated div.
Is there a solution to this or is this perhaps bad practice and should be done differently?
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#body {
overflow: hidden;
background: red;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.shape {
position: absolute;
right: -10%;
top: -50%;
height: 200%;
width: 45%;
transform: rotate(350deg);
background: white;
}
#welcome {
position: absolute;
color: black;
z-index: 999;
margin-left: 65vw;
margin-top: 10vh;
}
#welcome h1 {
margin-bottom: 0;
font-size: 7vw;
}
#welcome p {
font-size: 4vw;
margin-top: 0;
}
#startbtn {
position: absolute;
font-size: 3vw;
padding: 4vh 5.5vw 4vh 5.5vw;
background: blue;
color: white;
border: none;
margin-left: 65vw;
margin-top: 70vh;
}
<body id="body">
<div class="shape"></div>
<div class="wrapper">
<div id="welcome" autofocus>
<h1>Welcome</h1>
<p>More Text Here</p>
</div>
</div>
<div class="wrapper">
<input type="button" id="startbtn" onclick="getstarted()" value="Get Started">
</div>
</body>
</html>
Thanks!
Welcome to Stackoverflow.
Putting the shape into the same container (I used the first wrapper) as your content should fix the problem. Why is this: Because the white shape should be in relation to your content. Also I did put the button in the same container.
And you dont need background-sizes for your body as it is just plain red.
I might have messed up your original dimensions, but this should do the trick.
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
overflow: hidden;
background: red;
}
.wrapper {
position: relative;
height: 100%;
}
.shape {
position: absolute;
margin-top: -50%;
margin-right: -50%;
right: 0;
height: 300%;
width: 100%;
transform: rotate(350deg);
background: white;
}
#welcome {
position: absolute;
color: black;
z-index: 999;
margin-left: 65vw;
margin-top: 10vh;
}
#welcome h1 {
margin-bottom: 0;
font-size: 7vw;
}
#welcome p {
font-size: 4vw;
margin-top: 0;
}
#startbtn {
position: absolute;
font-size: 3vw;
padding: 4vh 5.5vw 4vh 5.5vw;
background: blue;
color: white;
border: none;
margin-left: 65vw;
margin-top: 70vh;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#body {
overflow: hidden;
background: red;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.wrapper {
position: relative;
height: 100%;
}
.shape {
position: absolute;
margin-top: -50%;
margin-right: -50%;
right: 0;
height: 300%;
width: 100%;
transform: rotate(350deg);
background: white;
}
#welcome {
position: absolute;
color: black;
z-index: 999;
margin-left: 65vw;
margin-top: 10vh;
}
#welcome h1 {
margin-bottom: 0;
font-size: 7vw;
}
#welcome p {
font-size: 4vw;
margin-top: 0;
}
#startbtn {
position: absolute;
font-size: 3vw;
padding: 4vh 5.5vw 4vh 5.5vw;
background: blue;
color: white;
border: none;
margin-left: 65vw;
margin-top: 70vh;
}
<div class="wrapper">
<div class="shape"></div>
<div id="welcome" autofocus>
<h1>Welcome</h1>
<p>More Text Here</p>
</div>
<input type="button" id="startbtn" onclick="getstarted()" value="Get Started">
</div>
I'm a novice in html and css, I got a problem regarding this code.
Basically what I/m trying to do is to put a background image in the back of every section ( the image should fit perfectly the section). With this kind of code nothing happend, I can just change color to te section. there is no error in the path image so I'm a little bit confused.
#logo {
padding: 10px;
display: block;
margin: 0 auto;
width: 190px;
}
#logo1 {
padding: 10px;
display: block;
margin: 0 auto;
width: 190px;
z-index: 3;
}
header {
z-index: 2;
}
html {
height: 100%;
}
h1 {
font-family: "ChicagoFLF", sans-serif;
font-style: italic;
font-size: 2em;
text-align: center;
margin-top: 0px;
z-index: 1
}
h2 {
font-family: "ChicagoFLF", sans-serif;
font-style: italic;
font-size: 1em;
text-align: center;
margin: -15px;
}
h3 {
font-family: "ChicagoFLF", sans-serif;
font-size: 1em;
text-align: center;
margin: -15px;
text-decoration: none;
}
}
#back1 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url('asset/background1.png');
}
#back2 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url('asset/background1.png');
}
#back3 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url('asset/background1.png');
}
.onepage {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
q
}
.more {
display: block;
position: relative;
bottom: 1000px;
top: 0;
left: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
#push {
position: absolute;
bottom: 130px;
margin: 0 auto;
left: 47%;
}
#pushtext {
position: absolute;
bottom: 100px;
margin: 0 auto;
left: 46%;
}
#pushtext1 {
position: absolute;
bottom: 150px;
margin: 0 auto;
left: 46%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/onepage.css" />
<script src="https://code.jquery.com/jquery-2.1.4.js" integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/onepage.js"></script>
<title>One Page</title>
</head>
<body>
<header>
<div id="logo"><img id="logo1" src="asset/logoblack.png" alt=""></div>
<h1>
Andrea Lovati
</h1>
<h2>
some text
</h2>
</header>
<!--first section-->
<section class="onepage" id="back1">
<div id="pushtext">
<a href="#second">
<h3>discover more</h3>
</a>
</div>
<div id="push"><img src="asset/push.png"></div>
</section>
<!--second section-->
<div id="back2">
</div>
<!--third section-->
<section id="back3">
</section>
</body>
</html>
There is an issue with the background-image url. When you say
background-image: url('asset/background1.png');
You are telling your browser to wherever the css file is, this is a relative path from it. Let's say the css file name is:
myclasses.css
Given what you said, the containing folder should be looking like this:
myclasses.css --> Your css file
asset --> Folder
Now the "asset" folder MUST contain background1.png.
The most important error is that you have a superflous closing } curly bracket in your CSS, directly befor the rule for back1. Delete that:
#logo {
padding: 10px;
display: block;
margin: 0 auto;
width: 190px;
}
#logo1 {
padding: 10px;
display: block;
margin: 0 auto;
width: 190px;
z-index: 3;
}
header {
z-index: 2;
}
html {
height: 100%;
}
h1 {
font-family: "ChicagoFLF", sans-serif;
font-style: italic;
font-size: 2em;
text-align: center;
margin-top: 0px;
z-index: 1
}
h2 {
font-family: "ChicagoFLF", sans-serif;
font-style: italic;
font-size: 1em;
text-align: center;
margin: -15px;
}
h3 {
font-family: "ChicagoFLF", sans-serif;
font-size: 1em;
text-align: center;
margin: -15px;
text-decoration: none;
}
#back1 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url(http://placehold.it/600x450/cf9?text=back1);
}
#back2 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url(http://placehold.it/600x450/9fc?text=back2);
}
#back3 {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background-image: url(http://placehold.it/600x450/fc9?text=back3);
}
.onepage {
position: relative;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
}
.more {
display: block;
position: relative;
bottom: 1000px;
top: 0;
left: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
#push {
position: absolute;
bottom: 130px;
margin: 0 auto;
left: 47%;
}
#pushtext {
position: absolute;
bottom: 100px;
margin: 0 auto;
left: 46%;
}
#pushtext1 {
position: absolute;
bottom: 150px;
margin: 0 auto;
left: 46%;
}
<header>
<div id="logo"><img id="logo1" src="asset/logoblack.png" alt=""></div>
<h1>
Andrea Lovati
</h1>
<h2>
some text
</h2>
</header>
<!--first section-->
<section class="onepage" id="back1">
<div id="pushtext">
<a href="#second">
<h3>discover more</h3>
</a>
</div>
<div id="push"><img src="asset/push.png"></div>
</section>
<!--second section-->
<div id="back2">
</div>
<!--third section-->
<section id="back3">
</section>
I was having this problem with the image as well, so what I did was, place the img and the css file in the same assets folder. Then to link the css on html just write "". And for the background-image on css, just write "background-image: your-image.png". That's what I made to manage that. And to make the image fit perfectly on the section use "background-size: cover" on each section.
It seems I have a problem with my footer. My Content div won't push the footer down. It just go through it. I have been searching the net for days now (even stackoverflow), but I can't seem to find a solution. If anyone can help me, I would really appreciate it. I have tryed to clean up the html, so it would be easier to help me, however, If you like the original code, go to http://djstarkick.com/where-we-belong. (You will also see the problem with the footer.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>StarKick</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css">
</head>
<body>
<div class="background">
<div class="Container">
<div class="Header">
<div class="Slideshow">
<div class="TopLine"></div><!--TopLine-->
<div class="NewMusic">
<div class="NewMusicText"></div><!--NewMusicText-->
</div><!--NewMusic-->
<div class="WhereWeBelongPodcast">
<div class="WhereWeBelongPodcastText"></div><!--WhereWeBelongPodcastText-->
</div><!--WhereWeBelongPodcast-->
<div class="Meny">
</div>
</div><!-- Meny-->
</div><!--Slideshow-->
<div class="HeaderLine"></div><!--HeaderLine-->
<div class="Logo"></div><!--Logo-->
</div><!--Header-->
<div class="MainContent">
<div class="TwitterPost">
<div class="TwitterFeed">
</div><!--TwitterFeed-->
</div><!--TwitterPost-->
<div class="Content">
<div class="contentbackground">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<hi><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?> <!--Wordpress-->
</div><!--Contentbackground-->
</div><!--Contentline-->
</div><!--Content-->
</div><!--MainContent-->
<div class="Footer"></div><!--Footer-->
</div><!--Container-->
</div><!--Background-->
</body>
</html><!-- -->
CSS code:
/*
Theme Name: StarKick - Where We Belong
Theme URI: djstarkick.com
Author: Dani Møllerplass
Author URI: djstarkick.com
Description: My first theme on wordpress for my own use.
Version: 1.0
*/
#charset "utf-8";
body {
margin: 0;
padding: 0;
background-color:#000
}
.background {
height: 1080px;
width: 1920px;
background-image: url(Pictures/Background/background.png);
background-repeat: no-repeat;
position: relative;
top: 0px;
}
.Container {
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
top: 0px;
}
.Header {
height: 560px;
width: 980px;
position: relative;
}
.HeaderLine {
height: 45px;
width: 980px;
}
.Share {
height: 55px;
width: 265px;
position: absolute;
top: 5px;
left: 345.5px;
}
.Logo {
height: 182px;
width: 408px;
margin-right: auto;
margin-left: auto;
position: absolute;
bottom: 25px;
left: 291px;
}
.Meny {
height: 50px;
width: 545px;
position: absolute;
top: 150px;
left: 217.5px;
}
.MenyText {
height: 50px;
width: 545px;
position: absolute;
top: 7.5px;
}
.MainContent {
width: 980px;
position: relative;
height: auto;
}
.Content {
width: 625px;
height: auto;
left: 0px;
top: 0px;
float: left;
}
.Contentline {
height: 45px;
width: 625px;
top: 0px;
}
.contentbackground {
width: 625px;
background-repeat: repeat-y;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
left: 0px;
background-color: #000;
position: relative;
}
.Footer {
height: 150px;
width: 980px;
font-family: "high Tower Text";
color: #FFF;
text-align: center;
position: relative;
clear: both;
}
.TwitterPost {
height: 650px;
width: 325px;
right: 0px;
float: right;
}
.TwitterFeed {
height: 600px;
width: 323px;
position: absolute;
top: 29px;
right: 1px;
}
.Slideshow {
height: 450px;
width: 980px;
position: relative;
}
.NewMusic {
height: 53px;
width: 332px;
position: absolute;
left: 0px;
bottom: 0px;
}
.NewMusicText {
height: 53px;
width: 300px;
position: absolute;
left: -5px;
bottom: 3px;
}
.TopLine {
height: 397px;
width: 980px;
position: absolute;
top: 0px;
}
.WhereWeBelongPodcast {
height: 53px;
width: 332px;
position: absolute;
right: 0px;
bottom: 0px;
}
.WhereWeBelongPodcastText {
height: 53px;
width: 300px;
position: absolute;
right: -15px;
bottom: 0px;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
color: #FFF;
text-decoration: none;
}
a:hover {
color: #CCC;
text-decoration: none;
}
a:active {
color: #FFF;
text-decoration: none;
font-family: "high Tower Text";
text-align: center;
}
.background .Container .Header .Slideshow .Meny .MenyText table tr td {
color: #FFF;
font-family: "high Tower Text";
text-align: center;
}
.year {
font-size: 22px;
}
Thanks in advance! :)
Add a div right before your footer class that is inside of your MainContent div like so
EDIT: Also, remove the height from your ContentLine div
HTML
<div class="clearFloat"></div>
CSS
.clearFloat { clear: both;}
add float:left to every containter and add clear:left for the footer
I need your help.
How can the HTML/CSS properties be adjusted so as to allow the OK button to appear in the center of my custom alertbox and just after the text?
I can't, for the life of me figure as to how to do this. =\
Here is what is happening:
Here is my desired result:
Here is the html markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: tahoma;
font-size: 8pt;
visibility: hidden;
}
#alertBox_container {
background: rgb(212,208,200);
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
}
#alertBox_titlebar {
height: 22px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
color: white;
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 18px;
font-size: 10px;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
font-weight: bold;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
#alertBox_btn{
position: relative;
width: 40px;
height: auto;
text-align: center;
}
</style>
<script type="text/javascript">
//alertBox('text','ok')
function alertBox(text) {
document.getElementById('alertBox_text').innerHTML = text
document.getElementById('alertBox').style.visibility = 'visible'
}
function alertBox_hide() {
document.getElementById('alertBox').style.visibility = 'hidden'
}
</script>
</head>
<body onload="alertBox('this is a test')">
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text">This is some sample text that will appear here</div>
<div id="alertBox_btn"><input type="button" value="OK"></div>
</div>
</div>
</div>
</body>
</html>
change the class..
<style type="text/css">
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: tahoma;
font-size: 8pt;
visibility: hidden;
}
#alertBox_container {
background: rgb(212,208,200);
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
}
#alertBox_titlebar {
height: 22px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
color: white;
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 18px;
font-size: 10px;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
font-weight: bold;
}
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
margin-top:27px;`
}
#alertBox_btn{
position: relative;
height: auto;
text-align: center;
}
</style>
I have two DIVs inside another two parent DIVs. What I am looking to do is align the "clocks" DIV to the left of the "panel" DIV and the "sd" DIV toward the center of the "panel" DIV.
What is showing up as now:
What I am looking to do:
My HTML looks like:
<div id="weather">
<div id="panel">
<div class="clocks">
</div>
<div id="sd">
<script type="text/javascript" src="http://www.weathers.com"></script>
</div>
</div>
<p class="slide">Weather</p>
</div>
My CSS looks like:
#weather {
margin: 0 auto;
padding: 0;
width: 990px;
font: 75%/120% Arial, Helvetica, sans-serif;
top: 0;
position: absolute;
z-index: 999999999;
left: 0%;
margin-left: 0px;
}
#panel {
background: url('weatherBack.png') no-repeat;
height: 195px;
width: 990px;
display: none;
text-align: center;
margin: 0 auto;
line-height: 195px;
}
#sd {
margin: 0 auto;
padding: 0;
width: 175px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
background: url(btn.png) no-repeat center top;
}
.btn-slide {
background: url(white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
.learn {
z-index: 9999999999999;
position: absolute;
top: 85px;
right: 3px;
}
.box-cnt {
padding: 10px;
padding-bottom: 2px;
background-color: #1FAAEB;
zoom: 1;
filter: alpha(opacity=80);
opacity: 0.8;
}
.clocks {
width: 209px;
height: 131px;
position: relative;
top: 0;
left: 151;
background: url('css/images/clockbg.png') no-repeat 0 0;
}
Try the float property with a value of left on your clock and weather panels:
.clocks {
width: 209px;
height: 131px;
position: relative;
float: left;
background: url('css/images/clockbg.png') no-repeat 0 0;
}
#sd {
margin: 0 auto;
padding: 0;
width: 175px;
position: relative;
float: left;
}
Here is a working JSFiddle link: http://jsfiddle.net/cYFfT/
If you want to have more space between them, simply set a left margin on the SD panel,
as in this update: http://jsfiddle.net/cYFfT/1/