I'm making a webpage as a product for my presentation in school. Now, this isn't the first time I've experienced this problem, but my scrollbars seems to cut a little off the top and on the side. On top of that the scrollbar is only HALF visible.
(Note that the black task bar in the top should fill out all the way from left to right and should be right up against the top.)
<head>
<style type="text/css">
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
left: -0.5%;
top: -8px;
width: 100.9%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #111;
}
textarea {
resize: none;
position: fixed;
left: 35%;
top: 1%;
width: 30%;
font-size: 160%;
height: 35px;
padding: 3px;
}
p {
font-size:20px;
font-family: arial;
position: absolute;
}
.underline {
border-bottom: 0.5px solid black;
display: inline-block;
line-height: 0.85;
}
</style>
<script type="text/javascript">
function clearContents(element) {
element.value = '';
}
</script>
</head>
<body>
<ul>
<li><a class="active" href="home.html" style="font-family: arial;">Ready2Job</a></li>
</ul>
<img src="http://res.cloudinary.com/urbandictionary/image/upload/a_exif,c_fit,h_200,w_200/v1396913907/vtimxrajzbuard4hsj78.jpg" style="position: absolute; left: 400px; top: 50px; z-index: -1; width: 60%;"> <!-- Grey Box -->
<textarea placeholder="Search for jobs"></textarea>
<img src="Billeder\home_noprofilepic.jpg" style="position: fixed; width: 70px; height: 70px;">
<p style="position: absolute; left: 80px; top: 41px;">Welcome, <i><span class="underline">Mikkel Mørkegaard</i></span><i>!</i></p>
<img src="Billeder\home_stars.jpg" style="position: fixed; width:180px; left: 50px; top: 75px;">
<p style="position: fixed; font-size: 10px; left:5px; top:125px;">(Edit profile)</p>
<img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 80px;">
<img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 1000px;">
</body>
You probably just need to reset the margin on in you body tag.
So try changing:
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
}
To:
html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
margin: 0px;
}
From the CSS, remove
html, body {
**overflow-x: hidden;**
}
The overflow-x part. This fixes the problems you mentioned. Let me know if this helped.
Related
Why i can not set image style height 100% for height as same as div container ?
When i tried to test code it's will be show like this.
https://i.imgur.com/Q1MGP0Z.png
I want to show image like this.
https://i.imgur.com/GeLUUCo.png
with class name img_look style height: 100%; How can i do ?
.li_look{
padding: 0px;
margin: 0;
position: relative;
width: 25%;
border-right: 3px solid #fff;
margin-right: -3px;
z-index: 11;
float: left;
list-style: none;
color: #333;
font-size: 19px;
background: #fff;
}
.div_1{
float: none;
margin: 0;
width: 100%;
height: 197.207px;
display: block;
position: relative;
}
.a_tag{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.div_2{
transform: translateX(-50%);
left: 50%;
top: 0;
background-color: transparent;
display: block;
position: absolute;
}
.img_look{
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: unset;
}
<ul>
<li class="li_look">
<div class="div_1">
<a href="#" class="a_tag">
<div class="div_2">
<img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look">
</div>
</a>
</div>
</li>
</ul>
The problem lies with the parent container of the img tag. Since, there is no height defined for it, you cannot use 100% in relation to the parent container. Define a height as shown below in my code for .div_2. And it will work fine.
.li_look{
padding: 0px;
margin: 0;
position: relative;
width: 25%;
border-right: 3px solid #fff;
margin-right: -3px;
z-index: 11;
float: left;
list-style: none;
color: #333;
font-size: 19px;
background: #fff;
}
.div_1{
float: none;
margin: 0;
width: 100%;
height: 197.207px;
display: block;
position: relative;
}
.a_tag{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width:100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.div_2{
transform: translateX(-50%);
left: 50%;
top: 0;
background-color: transparent;
display: block;
position: absolute;
height:100%;
}
.img_look{
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: unset;
}
<ul>
<li class="li_look">
<div class="div_1">
<a href="#" class="a_tag">
<div class="div_2">
<img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look">
</div>
</a>
</div>
</li>
</ul>
Your image IS the same size as your div, but your div ISN'T the same size as the a tag that hold it. since your a has overflow:hidden; you can't see that your div is actually bigger.
you cant just add height:100%; or width:100%; to your div, but keep your image dimensions the same.
Also : that feels really wrong don't you think ?
height: 197.207px;
I think You Need This https://jsfiddle.net/wqhch5et/ view full screen mode.
You need to change position: absolute; to position: fixed; in div_2
.li_look{
padding: 0px;
margin: 0;
position: relative;
width: 25%;
border-right: 3px solid #fff;
margin-right: -3px;
z-index: 11;
float: left;
list-style: none;
color: #333;
font-size: 19px;
background: #fff;
}
.div_1{
float: none;
margin: 0;
width: 100%;
height: 197.207px;
display: block;
position: relative;
}
.a_tag{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.div_2{
transform: translateX(-50%);
left: 50%;
top: 0;
background-color: transparent;
display: block;
position: fixed;
}
.img_look{
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: unset;
}
<ul>
<li class="li_look">
<div class="div_1">
<a href="#" class="a_tag">
<div class="div_2">
<img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look">
</div>
</a>
</div>
</li>
</ul>
First off, I keep trying to make the boxes move down so you can see the shadows (if there's an easier way, I'd love to hear it), but when I put them all down, they are right under one another again, so you can't see them.
Second, and this is the most important, the fifth div box stacks right on top of the fourth. I have NO clue why. I did the fifth just like the fourth. I really hope it isn't a stupid question, but I've scoured my code to find it, and I just can't.
<head>
<style>
html, body {
margin: 0;
height: 100%;
}
h1, h2, h3, body {
font-family: "Arial", Helvetica, sans-serif;
}
.topp {
margin-right: 500px;
background-image: url('gamerbeta.jpg');
background-color: fff;
width: 100%;
height: 430px;
box-shadow: 3px 3px 4px black;
}
.second {
position: relative;
top: 10px;
background-color: #white;
width: 100%;
height: 430px;
box-shadow: 3px 3px 4px black;
}
.secondword {
position:absolute;
top: -30px;
left: 435px;
font-size: 50px;
}
.secondp {
position:absolute;
top: 80px;
left: 1000px;
text-align: center;
font-size: 40px;
}
.secondimage {
position: absolute;
top: 190px;
left: 1230px;
}
.secondwordtwo {
position:absolute;
top: 300px;
left: 1180px;
font-size: 30px;
font-style: italic;
}
.arrow {
position: absolute;
top: 370px;
left: 900px;
}
.third {
position: relative;
top: 10px;
background-color: #D8D8D8;
width: 100%;
height: 430px;
box-shadow: 1px 1px 4px black;
}
.thirdword {
position:absolute;
top: 130px;
left: 350px;
font-size: 38px;
}
.thirdp {
position:absolute;
top:200px;
left:350px;
font-size: 26px;
width: 670px;
}
.thirdpic {
position:absolute;
top: 25px;
left:1150px;
}
.fourth {
position: relative;
top: 10px;
height: 430px;
width: 100%;
background-color: white;
box-shadow: 3px 3px 4px black;
}
.fourthpic {
position: absolute;
top: 10px;
left: 460px;
}
.fourthword {
position: absolute;
top: 100px;
left: 540px;
font-size: 38px;
width: 500px;
}
.fourthp {
position: absolute;
top: 170px;
left: 540px;
font-size: 26px;
width: 650px;
}
.fifth {
position: relative;
top: 10px;
height: 430px;
width: 100%;
background-color: #D8D8D8;
box-shadow: 3px 3px 4px black;
}
</style>
</head>
<body>
<div class=topp></div>
<div class=second>
<div class=secondword><h1>BETA</h1></div>
<div class=secondp>EXCLUSIVE ACHIEVEMENT<br>FOR JOINING BETA</div>
<div class=secondimage><img src="test.png" alt=""></div>
<div class=secondwordtwo>Beta Tester</div>
<div class=arrow><img src="arrow.png" alt="" height="42" width="42"></div>
</div>
<div class=third>
<div class=thirdword>FIND GAMERS JUST LIKE YOU...</div>
<div class=thirdp>test here to show you</div>
<div class=thirdpic><img src="gamer.png" alt="" height="375"
width="394"></div>
</div>
<div class=fourth>
<div class=fourthpic><img src="dream.jpg" alt="" height="420" width="420"
</div>
<div class=fourthword>STAY CONNECTED...</div>
<div class=fourthp>test here to show you</div>
</div>
<div class=fifth>
</div>
</body>
As Adrei mentioned, the class names need to be between double quotes.
Also, you were missing an ending triangle bracket (>) on line 145 for your image tag.
<img src="dream.jpg" alt="" height="420" width="420">
I'm try to do a special navigation-bar.
I will show it in pictures:
this on scrollbar on top
and this on scrollbar down:
So I tried to do header with position: fixed and z-index: 1.
inside nav with z-index high(1000) and
the right block with z-index high(1000)
and the content have z-index: 2 and position: relative.
and it didn't worked :/
**and important thing is that I need the upload div will be in the header
and will be higher (in z-index) from content
I will try to show you in code:
header {
display: block;
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
z-index: 1;
background-color: blue;
}
nav {
width: 100%;
height: 40px;
background-color: green;
z-index: 1000;
}
#upload {
background-color: green;
height: 40px;
width: 40px;
float: right;
margin-right: 0;
z-index: 1000;
}
#content {
position: realative;
display: block;
border: 2px solid #000;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 80%;
background-color: #cacaca;
z-index: 2;
}
<header>
<nav></nav>
<div id="upload">
</div>
</header>
<div id="content">
</div>
thank you,and I'm sorry about my english !!
you will need to move the nav out of the header for the #content z-index to work and need to align nav with fixed positioning or by giving margin
header {
display: block;
position: fixed;
width: 100%;
top: 0;
right: 0;
left: 0;
height: 80px;
background-color: blue;
z-index: 1;
}
nav {
width: 100%;
height: 40px;
z-index: 3;
background-color: green;
position: fixed;
top: 0;
right: 0;
left: 0;
}
#upload {
background-color: green;
height: 40px;
width: 40px;
float: right;
margin-right: 0;
margin-top: 40px;
}
#content {
position: relative;
display: block;
border: 2px solid #000;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 80%;
background-color: #cacaca;
z-index: 2;
}
<header></header>
<nav>
<div id="upload"></div>
</nav>
<div id="content"></div>
Basically I need to make a circle look like it's hanging from a string. I used the basic CSS of:
#string {
position: relative;
}
#circle {
position: absolute;
bottom: 0;
}
And it's putting the circle at the bottom, but not below the "string" It's sitting on the right side of it, but at the bottom. Am I stupid? What am I doing wrong?
EDIT: Full code
<div class="anchor" id="one">
<div class="circle" id="one">
</div>
</div>
html, body { height: 100%; width: 100%; }
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #DDD;
margin: 0;
padding: 0;
color: #000;
}
.anchor {
background-color: #000;
position: relative;
width: 10px;
}
.anchor#one {
margin-left: 10%;
height: 500px;
}
.circle {
position: absolute;
bottom: 0;
border-radius: 50%;
background-color: #000;
}
.circle#one {
width: 200px;
height: 200px;
}
bottom sets the distance of the element's bottom border to its offset parent.
To do what you want, you need to use top:
#circle {
position: absolute;
top: 100%;
}
<div class="anchor" >
<div class="circle" >
</div>
</div>
css
.anchor {
background-color: #000;
position: relative;
width: 10px;
margin-left: 10%;
height: 500px;
}
.circle {
position: absolute;
bottom: -200px;
border-radius: 50%;
background-color: #000;
width: 200px;
height: 200px;
left: -100px;
}
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