Getting This Output on my Blog. (Language is Bengali)
I want it to float always on the front of all element. But Some Contents are overriding it. how to solve it?
Blog: http://www.blogger-tawsif.ga/
Code is,
<div class="grplusbd_floating_likebox">
<span class="iconContainer">
<img class="ico" src="http://lh3.googleusercontent.com/-jpijNi_XBh4/AAAAAAAAAAI/AAAAAAAAB_0/P3R_olWI_KI/s512-c/photo.jpg"/>
</span>
<iframe id="floatfollow" allowtransparency="true" frameborder="0" height="50" scrolling="no" src="https://www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Ftawsif.torabi&width=64&height=65&layout=box_count&size=small&show_faces=true&appId=164293520647951" style="border:none;overflow:hidden; vertical-align: middle; float: right;" width="64"></iframe>
</br>
<span style="font-weight: bold; color: white;">
Tawsif Torabi
</span>
</br>
<small style="font-weight: bold; color: white;">
Web Developer, GR+ Bangladesh
</small>
</div>
<style>
.grplusbd_floating_likebox {
position: fixed;
top: 500px;
left: 0px;
border-radius: 0px 10px 10px 0px;
padding: 10px 15px;
background-color: rgba(255, 0, 0, 0.93);
box-shadow: 1px 1px 7px black;
}
.iconContainer {
border-radius: 50px;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
img.ico{
vertical-align:middle;
height: 45px;
width: auto;
}
</style>
Do you mean in front? If so add:
z-index: 9999;
If top yeah someone already answered the top and left positions
Related
I'm new to html and css, but I'm trying to teach myself how to make a decent looking website. I've gotten to the footer portion of the website and I thought I created well since it looked as I wanted, but when I zoomed into the page, the elements in the footer all began overlapping with one another. Could someone help me out by showing me how to fix this issue. Any help is appreciated.
My current footer:
.footer {
background: #323132;
text-transform: uppercase;
width: 100%;
height: 350px;
color: white;
}
.footer a {
text-decoration: none;
color: #a2a4a7;
font-family: Arial,sans-serif;
font-size: 14px;
}
.vertical-right-1 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 20%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-2 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 45%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-3 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 70%;
box-shadow: 0.2px 0.2px;
}
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 10px 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div class="vertical-right-1">
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;">Need To Talk?</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div class="vertical-right-2">
</div>
<div style="float:right; margin: 0 auto; width: 330px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;"><strong>Sports</strong></p>
<p>Soccer</p>
<p>Basketball</p>
<p>NFL</p>
<p>Tennis</p>
</div>
<div class="vertical-right-3">
</div>
<div style="margin:0 auto; width:630px; padding:4px 0 0 0;">
<strong>
<p style="font-family: 'Cabin Condensed', sans-serif; font-size: 20px;">About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
<a href="#"><i class="fa fa-facebook"
style="padding: 25px;font-size: 30px; width: 80px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a>
<!-- <a href="#"><i class="fa fa-twitter"
style="padding: 2px;font-size: 30px; width: 30px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a>
<a href="#"><i class="fa fa-instagram"
style="padding: 2px;font-size: 30px; width: 30px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a> -->
</div>
As you can see, the lines are all overlapped, and it looks just wrong. If you view it in full screen mode it looks as it should.
Hope someone can lend a hand!
You're going to want to set up some breakpoints which will allow you to alter CSS for different screen sizes.
Also, I wouldn't use absolute and left to position elements on a page, unless in particular circumstances. What you want to do instead is use grid or flexbox, it will make life much easier in the future.
I have the following partially generated generated and simplified code which is used to display warnings or errors in Dojo dialogs:
/*Relevant CSS:*/
.l-status-message-wrapper {
height: auto;
margin-left: 5px;
margin-top: 2px;
min-height: 15px;
}
.l-status-message-wrapper--dialog {
margin-left: 0px;
display: block;
word-wrap: break-word;
}
.c-global-message {
min-height: 15px;
color: #a5cf42;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.c-global-message--error {
color: #e31d25;
}
.dijitDialog {
background: #eee;
border: 1px solid #d3d3d3;
-webkit-box-shadow: 0 5px 10px #adadad;
padding: 0;
}
.dijitDialog {
position: absolute;
z-index: 999;
overflow: hidden;
}
.dijitDialogTitleBar {
background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;
vertical-align: middle;
}
.dijitDialogTitleBar {
background: #fafafa url(images/titleBar.png) repeat-x top left;
padding: 5px 6px 3px 6px;
outline: 0;
}
.dijitDialogTitleBar {
cursor: move;
}
form {
width: 200px;
height: 200px;
background-color: green;
}
<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">
<div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
<span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>
<span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">
<span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>
</span>
</div>
<div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">
<div id="machineParameterDialogContents" class="machineParameterDialogContents">
<span class="l-status-message-wrapper l-status-message-wrapper--dialog">
<span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">
error: <span>Action not successful. Please correct the validation errors</span>
</span>
</span>
<form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">
</form>
</div>
</div>
</div>
I'd like long text in .l-status-message-wrapper--dialog to not increase the width of the .machineParameterDialogContents div.
However, I'd rather not give the .machineParameterDialogContents div or any of the parent divs a width or max-width. I want the container to adjust the width based on the widest element AFTER the component with long text, which can vary on a page by page basis and sometimes even be different on the same page for the same dialog depending on what action is being performed. To clarify: It's the outside .machineParameterDialogContents div I don't want to widen, not the .l-status-message-wrapper--dialog span. That span should widen to at most the size of any other components in the page. Also, everything inside the machineParameterDialogContents div is loaded through Ajax, in case it's relevant.
So in the above example, I don't want the span to be more than 200px, and the rest should automatically wrap, but I want this without defining a max-width on the span or the machineParameterDialogContents div. Note that I have given the form a fixed width, but in reality this width can change between dialog loads and is pretty dynamic.
Is this at all possible? I need to support Chrome, Firefox and IE11.
The simplest add to what you already had is to just add
max-width: fit-content to .l-status-message-wrapper--dialog
and it makes the text fit the available width and doesn't add to the overall width
/*Relevant CSS:*/
.l-status-message-wrapper {
height: auto;
margin-left: 5px;
margin-top: 2px;
min-height: 15px;
}
.l-status-message-wrapper--dialog {
margin-left: 0px;
display: block;
max-width: fit-content;
}
.c-global-message {
min-height: 15px;
color: #a5cf42;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.c-global-message--error {
color: #e31d25;
}
.dijitDialog {
background: #eee;
border: 1px solid #d3d3d3;
-webkit-box-shadow: 0 5px 10px #adadad;
padding: 0;
}
.dijitDialog {
position: absolute;
z-index: 999;
overflow: hidden;
}
.dijitDialogTitleBar {
background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;
vertical-align: middle;
}
.dijitDialogTitleBar {
background: #fafafa url(images/titleBar.png) repeat-x top left;
padding: 5px 6px 3px 6px;
outline: 0;
}
.dijitDialogTitleBar {
cursor: move;
}
form {
width: 200px;
height: 200px;
background-color: green;
}
<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">
<div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
<span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>
<span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">
<span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>
</span>
</div>
<div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">
<div id="machineParameterDialogContents" class="machineParameterDialogContents">
<span class="l-status-message-wrapper l-status-message-wrapper--dialog">
<span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">
error: <span>Action not successful. Please correct the validation errors</span>
</span>
</span>
<form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">
</form>
</div>
</div>
</div>
You can use flex and add another div on the right. Then set flex-grow: 1 for both. If the right div have more content it will take the rest of the screen, if not, the left div will stretch. I think it's the best you can do without defining any width.
/*Relevant CSS:*/
.l-status-message-wrapper {
height: auto;
margin-left: 5px;
margin-top: 2px;
min-height: 15px;
}
.l-status-message-wrapper--dialog {
margin-left: 0px;
display: block;
word-wrap: break-word;
}
.c-global-message {
min-height: 15px;
color: #a5cf42;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.c-global-message--error {
color: #e31d25;
}
.dijitDialog {
background: #eee;
border: 1px solid #d3d3d3;
-webkit-box-shadow: 0 5px 10px #adadad;
padding: 0;
}
.dijitDialog {
position: absolute;
z-index: 999;
overflow: hidden;
}
.dijitDialogTitleBar {
background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;
vertical-align: middle;
}
.dijitDialogTitleBar {
background: #fafafa url(images/titleBar.png) repeat-x top left;
padding: 5px 6px 3px 6px;
outline: 0;
}
.dijitDialogTitleBar {
cursor: move;
}
form {
width: 200px;
height: 200px;
background-color: green;
}
.dijitDialogPaneContent{
display: flex;
}
.machineParameterDialogContents{
flex-grow: 1;
}
.more-content{
flex-grow: 1;
}
<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">
<div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
<span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>
<span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">
<span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>
</span>
</div>
<div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">
<div id="machineParameterDialogContents" class="machineParameterDialogContents">
<span class="l-status-message-wrapper l-status-message-wrapper--dialog">
<span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">
error: <span>Action not successful. Please correct the validation errors</span>
</span>
</span>
<form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">
</form>
</div>
<div class="more-content">
“Such a little helpless creature will only be in the way,” I said; “you had better pass him up to the Indian boys on the wharf, to be taken home to play with the children. This trip is not likely to be good for toy-dogs. The poor silly thing will be in rain and snow for weeks or months, and will require care like a baby.” But his master assured me that he would be no trouble at all; that he was a perfect wonder of a dog, could endure cold and hunger like a bear, swim like a seal, and was wondrous wise and cunning, etc., making out a list of virtues to show he might be the most interesting member of the party.
</div>
</div>
</div>
After some investigating, our webdesigner has found a solution involving putting a flexbox around the span. I'm sharing the solution below for anyone else with this problem.
/*Relevant CSS:*/
.l-status-message-wrapper {
height: auto;
margin-left: 5px;
margin-top: 2px;
min-height: 15px;
}
.l-status-message-wrapper--dialog {
margin-left: 0px;
display: block;
word-wrap: break-word;
}
.c-global-message {
min-height: 15px;
color: #a5cf42;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.c-global-message--error {
color: #e31d25;
}
.dijitDialog {
background: #eee;
border: 1px solid #d3d3d3;
-webkit-box-shadow: 0 5px 10px #adadad;
padding: 0;
}
.dijitDialog {
position: absolute;
z-index: 999;
overflow: hidden;
}
.dijitDialogTitleBar {
background: #C9CFD2 url(../../images/onglet_bg.gif) repeat-x;
vertical-align: middle;
}
.dijitDialogTitleBar {
background: #fafafa url(images/titleBar.png) repeat-x top left;
padding: 5px 6px 3px 6px;
outline: 0;
}
.dijitDialogTitleBar {
cursor: move;
}
form {
width: 200px;
height: 200px;
background-color: green;
}
/* Limits the width of an element so it does not exceed the width of the largest element
* on the same DOM level. It will adjust the width of its contents in cases where the parent
* element has no width value set. (e.g. A dialog message span that may not exceed the width of a accompagnied c-panel-dialog)
*
* Always use in a hierarchical markup combination (l-dynamic-width-wrapper > l-dynamic-width-wrapper-items)
*/
.l-dynamic-width-wrapper {
display: flex;
}
.l-dynamic-width-wrapper > .l-dynamic-width-wrapper-items {
flex-grow: 1;
width: 0;
}
<div class="dijitDialog dijitDialogFocused dijitFocused" role="dialog" aria-labelledby="machineParameterDialog_title" id="machineParameterDialog" widgetid="machineParameterDialog">
<div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar">
<span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="machineParameterDialog_title" role="heading" level="1">Edit Machine Parameter</span>
<span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="Cancel" role="button" tabindex="0">
<span data-dojo-attach-point="closeText" class="closeText" title="Cancel">x</span>
</span>
</div>
<div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent" style="width: auto; height: auto;">
<div id="machineParameterDialogContents" class="machineParameterDialogContents">
<div class="l-dynamic-width-wrapper">
<div class="l-dynamic-width-wrapper-items">
<span class="l-status-message-wrapper l-status-message-wrapper--dialog">
<span id="machineParameterDialogStatus" class="c-global-message c-global-message--error">
error: <span>Action not successful. Please correct the validation errors</span>
</span>
</span>
</div>
</div>
<form id="machineParameterDialogForm" name="machineParameterDialogForm" action="/machineParameterAction.action" method="POST" class="c-panel-dialog">
</form>
</div>
</div>
</div>
I am attempting to attach a div on the bottom on my image with no spaces. However, the following code does not do what I ask of it. In addition to this, when hovering anywhere along the width of my div h2, the click button occurs, to indicate it is clickable in this blank space. I feel I have attempted everything to attach the black div and the image together, and make them both clickable without glitching or bugging with only one anchor tag. If you can help me, I would be extremely greatful.
Here is my current HTML code:
<div style="#">
<a style="max-width: 280px;" href="#">
<img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0;">
<div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
<h2 style="color: white; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
</div>
</a>
</div>
Thanks in advance!
Use this rule, it is caused by initial margin of h2
<div style="max-width: 280px; overflow:hidden;" style="#">
<a style="max-width: 280px;" href="#">
<img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0; display: block;">
<div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
<h2 style="color: white; margin:0px; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
</div>
</a>
</div>
here is a fiddle for you
There are a few things at play here.
Your <h2> is overflowing trough the parent because of collapsible margins. Set the margin to 0 to fix it.
Either the <a> or the main <div> needs display:inline-block to not go 100% width.
Finally, don't use inline styles. Use <style> tag or style.css and add some classes and IDs.
a{
max-width: 280px;
display: inline-block;
}
img{
height: 200px;
width: 280px;
border-radius: 10px 10px 0 0;
display: block;
}
h2{
color: white;
font-weight: bold;
text-align: center;
padding-top: 2px;
margin: 0;
}
a div{
background-color: black;
width: 280px;
height: 30px;
border-radius: 0 0 10px 10px;
}
<div>
<a href="#">
<img src="https://placeimg.com/280/200/any">
<div>
<h2>Bees</h2>
</div>
</a>
</div>
I was just wondering how I can better optimize my website (its just a project, not real) for Snap mode in Windows. Whenever I go into that mode, it screws up the entire webpage (see attached photo).
Thanks Jacob
http://i.stack.imgur.com/V4yF2.jpg
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel ="stylesheet">
<meta charset="UTF-8">
<title> JP's Webservices</title>
</head>
<body>
<div id ="body">
<div class = "nav">
<ul>
<li>
About Me
</li>
<li>
Contact Me
</li>
<li>
Pricing
</li>
</ul>
</div>
<div class ="jumbotron">
<div class ='container'>
<div id ='h1'>
<h1> Need a website? </h1>
<p> Look no further </p>
</div>
</div>
</div>
<div id ="white">
<h1> Qualities </h1>
<h3> What makes me unique? </h3>
</div>
<div id ="gray">
</div>
<div class ="des" >
<div class ="row">
<div class= "col-md-4">
<h2> Knowledge. </h2>
<p> Straight 'outta Compton 1231231231231231231231231231231231231231231231231231231231 </p>
<hr>
</div>
<div class="col-md-4">
<h2> Commitment. </h2>
<p> To excellence and to serve as a value resource 123123123123123123123123123123123123 </p>
<hr>
</div>
<div class="col-md-4">
<h2> Perspective. </h2>
<p> New outlook on your web designs 12312312312311111111111111111111111111111111111111111 </p>
<br>
</div>
</div>
</div>
</body>
<footer>
<div id ='footer'>
</div>
<div id ='footer1'>
<p> Copyright #2014-2015 Jacob Platin </p>
<div id ='foot1'>
<a href="https://twitter.com/TheJakeoShark" target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png" width="72" height="46" border="0" /></a>
</div>
<div id ='facebook'>
<a href ='https://facebook.com/jacob.platin' target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a>
</div>
</div>
</footer>
</html>
CSS
.des {
position: absolute;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
text-align: center;
}
.nav li {
list-style-type: none;
text-align: center;
float: left;
width: 33.3%;
position: relative;
z-index: 10;
color: black;
padding-top: 17px;
font-weight: 700;
font-size: 18px;
}
.nav {
background-color: #660000;
height: 85px;
z-index: 1;
box-shadow: 1px 1px 5px black;
}
.nav a {
text-decoration: none;
color: black;
font-weight: 700;
color: white;
}
.jumbotron {
position:relative;
background-image: url(http://www.welivesecurity.com/wp-content/uploads/2013/01/012838004-printed-internet-html-code-tec.jpg);
width: 100%;
height: 530px;
}
#h1 > h1 {
color:#660000;
text-align:left ;
padding-top: 34px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px black;
}
#h1 > p {
color:white;
text-align:left ;
padding-left: 5px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px black;
font-weight: 300;
}
#master_wrapper{overflow:hidden!important;}
#footer {
width: 1902px;
height: 170px;
background-color: black;
box-shadow: 1px 1px 12px 4px black;
position: absolute;
top: 1300px;
}
#footer1 {
height: 85px;
width: 1902px;
background-color: #660000;
position: absolute;
margin-top: 0px;
box-shadow: -4px -2px 9px black;
top: 1300px;
}
#footer1 > p {
text-align: center;
font-family: 'Georgia', sans-serif;
color: white;
font-size: 18px;
padding-top: 24px;
}
#foot1 {
padding-top: 42px;
text-align: center;
padding-left: 205px;
}
#facebook {
margin-left: 820px;
position: absolute;
bottom: 3px;
top: 95px;
}
.des > h2 {
padding-top: 80px;
color: #660000
}
#photo1 {
background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
width: 240px;
height: 200px;
position:relative;
}
.des > img {
margin-top: 40px;
box-shadow: 01px 01px 01px 5px black;
}
#h1 {
box-shadow: -1px -1px -32px black;
}
#gray {
width: 100%;
height: 300px;
background-color: #f7f7f7;
position: absolute;
z-index: -11;
margin-top: 0px;
}
#white > h1 {
z-index: 1;
padding-bottom: 100px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
color:#660000;
text-align: center;
}
#white > h3 {
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
color:#660000;
position: absolute;
bottom: 230px;
text-align:center;
z-index: 0;
margin-left: 43.3%;
}
.row {
padding-left: 56px;
z-index:-1;
}
Are you referring to resizing the site via snapping (taking up 50%) of the screen width? If you want your site to work whatever the the screen width you need to use fluid containers and media queries, which make up the concept of responsive web design.
From the looks of things your site uses fixed widths which limit the ability for the content to re-size fluidly with the browser when you snap.
Responsive webdesign needs to be integrated form the get go, it can be annoying to update an existing site (but still possible). I'd recommend taking a look at this tutorial/overview: http://www.w3schools.com/html/html_responsive.asp
In short to fix your site you will need to get rid of the fixed widths you have set in pixels and uses percentages as they will adapt depending on the available width.
I just have a quick question about my website. I have a huge whitespace between my footer and the end of my background image, about 500 or so pixels. I can't seem to find the problem and any help is appreciated.
Thanks,
Jacob
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">
<meta charset="UTF-8">
<title> JP's Webservices</title>
</head>
<body>
<div id ="body">
<div class = "nav">
<ul>
<li>
About Me
</li>
<li>
Contact Me
</li>
<li>
Pricing
</li>
</ul>
</div>
<div class ="jumbotron">
<div class ='container'>
<div id ='h1'>
<h1> Need a website but don't know how? Look no further </h1>
</div>
<p> Web engineer for hire
</div>
</div>
<div style='align:center;text-align:center' class ="des" >
<h2> Knowledge. </h2>
<p> Straight 'outta Compton </p>
<hr>
<h2> Commitment. </h2>
<p> To excellence and to serve </p>
<hr>
<h2> Perspective. </h2>
<p> New outlook on your web designs </p>
<br>
</div>
</div>
</body>
<footer>
<div id ='footer'>
<p> Copyright #2014-2015 Jacob Platin
</div>
<div id ='footer1'>
<div id ='foot1'>
<a href="https://twitter.com/TheJakeoShark" target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png" width="72" height="46" border="0" /></a>
</div>
<div id ='facebook'>
<a href ='https://facebook.com/jacob.platin' target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a>
</div>
</div>
</footer>
</html>
CSS
.jumbotron {
background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
z-index: 110;
position: relative;
}
.des {
position: relative;
bottom: 1564px;
background-color: #e3e3e3;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
box-shadow: 1px 5px 35px black;
text-align: center;
width: 1050px;
height:1000px;
position: relative;
z-index: -1;
margin: 0 auto;
}
.nav li {
list-style-type: none;
text-align: center;
float: left;
width: 33.3%;
position: relative;
z-index: 10;
color: black;
padding-top: 12px;
font-weight: 700;
font-size: 18px;
}
.nav {
background-color: #660000;
height: 65px;
box-shadow: 2px 2px 8px 3px black;
}
.nav a {
text-decoration: none;
color: black;
padding-top: 15px;
font-weight: 700;
color: white;
}
.container > p {
padding-top: 100px;
height: 500px;
position: relative;
bottom: 140px;
font-weight: 700;
color: #cc0000;
text-align: center;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px blue;
}
.jumbotron {
background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
background-position: -10px -60px;
z-index: -1;
height: 1700px;
}
#h1 {
position: relative;
top: -50px;
text-align: center;
font-family: 'Georgia', times, serif;
background-color: black;
color: #e3e3e3;
text-shadow: 5px 5px 5px white;
height: 150px;
width: auto;
margin: 0;
margin-left: 44px;
margin-right:44px;
position: relative;
z-index: -1;
}
#master_wrapper{overflow:hidden!important;}
#footer {
width: 2000px;
height: 200px;
background-color: black;
box-shadow: 1px 1px 12px 4px black;
position: relative;
bottom: -100px;
}
#footer1 {
height: 78px;
width: 2000px;
background-color: #660000;
position: relative;
margin-top: 24px;
}
#footer > p {
text-align: center;
font-family: 'Georgia', sans-serif;
color: white;
font-size: 18px;
padding-top: 24px;
}
#foot1 {
padding-top: 15px;
text-align: center;
}
#facebook {
position: relative;
bottom: 123px;
text-align: center;
}
.des > h2 {
padding-top: 80px;
color: #660000
}
#photo1 {
background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
width: 240px;
height: 200px;
position:relative;
}
.des > img {
margin-top: 40px;
box-shadow: 01px 01px 01px 5px black;
}
When you use position: relative; the browser thinks, "Ok, I'm going to keep the element's technical location the same, but I'm going to make it appear to be in a different spot." You have the following CSS on your .des element:
.des {
position: relative;
bottom: 1564px;
}
This says, "Keep .des there, but make it appear 1564 pixels higher (further away from the original bottom)". This results in a blank space, which is the height of the element, showing up where the element technically still is, even though it appears elsewhere.
You also have the following CSS on your #footer element:
#footer {
position: relative;
bottom: -100px;
}
This makes it appear 100px lower on the page, but keeps the original spot there, and now blank.
Unless I'm mistaken, these two gaps combine for a whopping 1038px of blank space on your page. The solution? You're probably looking for position: absolute;, which doesn't keep the original spot for the element. In fact, I think that if you changed the positioning part of the CSS on .des to be
.des {
position: absolute;
top: 260px;
}
or something close to that, it would get rid of most of the gap, minus the 100px on #footer. Here's a JSFiddle, if you'd care to have a look.
The height of your background image in your CSS is set to height: 1700px; but the background image that you link to is only 1200px high. That would seem to account for the 500px difference