i'm new to HTML & CSS and was hoping someone could help me out. I'm having a problem with this page where content is not fixed in place and when I zoom in and out the containers move freely. Any idea how to fix this? Not sure what layout I should be using to prevent this from happening. Thanks
<body>
<img class="img" src="http://i824.photobucket.com/albums/zz162/nathanial292/banner_zps45abd080.png">
<div id="header">
<h3 id="header h3">
Home Servers Shop Forum About Us Contact
</h3>
</div>
<div class="left">
<h1>Server Updates</h1>
<h2><span>Hello readers</span></h2>
</div>
<div class="right">
<a id="nabblelink" href="http://hydronetworks-forums.58422.x6.nabble.com/">HydroNetworks Forums</a>
<script src="http://hydronetworks-forums.58422.x6.nabble.com/embed/f1"></script>
</div>
<div id="footer">All Rights Reserved 2013 HydroNetwork</div>
</body>
#header{
z-index: 1;
border-radius: 5px;
height: 50px;
width: 600px;
background-color: #585858;
border: solid #383838 6px;
position: absolute;
margin-top: 25px;
margin-left:640px;
min-width: 480px;
}
.right{
z-index: 1;
border-radius: 5px;
height: 600px;
border: solid #383838 6px;
width: 400px;
background-color: #585858;
position: relative;
margin-top: 120px;
margin-right: 50px;
font-family: Ebrima;
overflow:auto
}
.left{
z-index: 1;
border-radius: 5px;
height: 600px;
border: solid #383838 6px;
width: 600px;
background-color: #585858;
position: relative;
margin-top: 120px;
margin-left:150px;
margin-right: 750px;
text-align: center;
font-family: Ebrima;
}
When you zoom in the content moves to the right and bottom, because you used pixel values.
At any rate you should remove
<body background= "http://i824.photobucket.com/albums/zz162/nathanial292/background_zps477e8756.png">
from your HTML-Code.
And add this to your CSS-Code:
body{
background: url(http://i824.photobucket.com/albums/zz162/nathanial292/background_zps477e8756.png);
background-position: top center;
}
If you don't want the divs to "move" when zooming, you should use percentages like width: 50%.
Related
I am a newbie in css and would like to create the following:
I therefore created the following code:
#outer{
height: 420px;
width: 550px;
background-color: green
}
#left_space{
float: left;
height: 100px;
width: 100px;
background-color: black;
}
#right_space{
float: right;
height: 50px;
width: 50px;
background-color: yellow;
}
<div id="outer">
<div id="left_space">
<div id="right_space">
</div>
</div>
</div>
This however gives me the following output:
Any feedback on what I should change?
I think you're looking for this:
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="outer">
<div id="left_space">
</div>
<div id="right_space">
</div>
</div>
</body>
</html>
CSS
#outer{
display: flex;
height: 420px;
width: 550px;
background-color: green
}
#left_space{
flex:1;
height: 100;
width: 100;
background-color: black;
margin: 10px 10px 300px 10px;
}
#right_space{
flex:1;
height: 100;
width: 100;
background-color: yellow;
margin: 10px 10px 300px 10px;
}
You can visit this link: http://flexboxfroggy.com/
to learn more about flexbox :)
https://jsfiddle.net/Liamm12/f69L8epL/1/
You can do that by using dispaly:flex in css
And if you want to make a spaces you can use margin
I'm seeing you have a border for the boxes in the screenshot above if you want to do that you need to use border: 1px solid #000; for each box
If you are looking to make the green background to be full page you can just change the width:100%; to 100% in #outer class
#outer{
height: 420px;
width: 550px;
background-color: green;
display: flex;
}
#left_space{
float: left;
height: 100px;
width: 100%;
background-color: black;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%;
}
#right_space{
float: right;
height: 100px;
width: 100%;
border: 3px solid #000;
background-color: yellow;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%;
}
<div id="outer">
<div id="left_space"></div>
<div id="right_space"></div>
</div>
I got an overflow hidden container (scrollable) and within a couple of tiles with custom dropdowns for better touch usability.
The problem: I can't get the dropdown list shown above the overflow hidden grandparent:
<div id="overflow">
<div class="tile">
<div class="absolute"></div>
</div>
<div class="tile">
<div class="absolute"></div>
</div>
<div class="tile">
<div class="absolute"></div>
</div>
</div>
#overflow{
height: 190px;
width: 200px;
border: 1px solid black;
overflow: hidden;
}
.tile {
clear: both;
margin: 10px 0 0 10px;
width: 180px;
height: 50px;
position: relative;
border: 1px solid green;
z-index: auto;
}
.absolute {
position: absolute;
left: 20px;
bottom: -20px;
width: 50px;
height: 30px;
border: 1px solid red;
background: red;
z-index: 99;
}
https://jsfiddle.net/enmwmtw8/
Any ideas how to achieve this?
This can't be achieved in this way. As whatever is in the overflow: hidden container can't be shown outside of it.
The only way to do this would be to place the dropdown outside the container
I am trying to achieve the box-shadow inside the right-border, currently everything is working fine except the shadow is getting display outside the right border. Following is the js-fiddle sample code I have tried...
http://jsfiddle.net/5y1guk6d/1/
HTML:
<div class="header">
<div class="header-bar">
<h1 class="title">Page title</h1>
</div>
</div>
<div class="main">
<div class="left-bar">
<div class="menu">
Menu Content
</div>
</div>
<div class="content">
Main content area
</div>
</div>
CSS:
.header {
width: 100%;
height: 40px;
top: 0;
color: white;
}
.header-bar {
height: 100%;
overflow: hidden;
background-color: #009BE1;
}
h1.title {
display: inline-block;
font: bold 16px Arial, sans-serif;
margin: 0 5px 0 15px;
position: relative;
top: 25%;
}
.main {
width: 100%;
overflow: hidden;
position: absolute;
top: 48px;
bottom: 0;
}
/* left bar */
.left-bar {
width: 160px;
float: left;
padding:10px;
background-color: #F0F0F0;
height: 100%;
position: relative;
border-right:1px solid #aaa;
box-shadow:5px 0 5px #ccc;
}
.content {
overflow: hidden;
left: 12px;
padding: 5px 17px 5px 5px;
height: 100%;
position: relative;
}
Appreciated your help..
If you want the box shadow to appear inside of the element instead of outside, use inset. Then you want to invert the x-offset so it appears on the right side.
box-shadow:inset -5px 0 5px #ccc;
http://jsfiddle.net/5y1guk6d/3/
I have 3 div blocks, the first one is bigger on the left hand side of the web-page and the other are smaller in located the right hand side. I want their relative location become fixed in all browsers with any zoom level. The two div blocks in the right column drop down below the first big div if I zoom in now.
Here is JFFIDDLE link of the code, please zoom in/out to see the issue.
<div id="topdiv">
<div class="bigdiv">
<p> big div </p>
</div>
<div id="staticcal">
<p> staticcal </p>
</div>
<div id="staticnews">
<p> staticnews </p>
</div>
</div
#topdiv{
display: inline-block;
background-color:#b0c4de;
}
.bigdiv{
margin: 10px 0;
position: relative;
width: 335px;
height: 250px;
float: left;
border: 2px solid #c7930d;
}
#staticcal {
width: 220px;
height: 100px;
line-height: 175px;
float: right;
display: inline-block;
border: 2px solid #c7930d;
border-radius: 4px;
margin: 5px;
margin-top: 10px;
margin-right: 0px;
position: relative;
}
#staticnews {
width: 220px;
height: 100px;
line-height: 175px;
float: right;
display: inline-block;
border: 2px solid #c7930d;
border-radius: 4px;
margin: 5px;
margin-right: 0px;
position: relative;
}
Add min-width: 800px; to the #topdiv id in your CSS file.
CSS:
#topdiv {
display: inline-block;
background-color:#b0c4de;
min-width: 800px;
}
I noticed that you are using border-radius in your development, so I updated your file to account for cross browser use. Here is an updated JSFiddle for your review. Additionally I lined up your staticcal and staticnews by adding float: left. Here is a minified version of your code: CLICK HERE
HTML:
<div id="topdiv">
<div class="bigdiv">
<p>big div</p>
</div>
<div id="staticcal">
<p>staticcal</p>
</div>
<div id="staticnews">
<p>staticnews</p>
</div>
</div>
CSS:
#topdiv {
display: inline-block;
background-color:#b0c4de;
min-width: 800px;
}
.bigdiv, #staticcal, #staticnews {
position: relative;
float: left;
border: 2px solid #c7930D;
}
.bigdiv {
margin: 10px 0;
width: 335px;
height: 250px;
}
#staticcal, #staticnews {
display: inline-block;
line-height: 175px;
width: 220px;
height: 100px;
margin: 5px;
margin-top: 10px;
margin-right: 0px;
-webkit-border-radius: 4px; /*This will address iOS 1 to 3.X, Android 1.6-2.1, Safari 3 - 4*/
-moz-border-radius: 4px; /*Firefox 1 to 3.6*/
border-radius: 4px; /*IE 9+, Opera 10.5, Chrome, Safari 5, FireFox 4+, iOS 4, Android 2.1+,
}
p {
text-align: center;
}
I have some very basic code and it works except everything aligns to the top...ideally the bars would align to the bottom. I suppose I could use fixed positioning as the dimensions are squared at 50px by 50px but I'd prefer something a little less "fixed".
<div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;">
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div>
</div>
I don't want to use a library or JS add on. Keeping this light weight is mission critical.
Also I'd prefer the bars were vertical. Any CSS guru care to shed the bit of light I seem to be missing? I've googled and most examples are far to complicated/sophisticated,
First of all, separate your CSS from your HTML. You're repeating too much code when you could just use a bar class for your inner divs.
bottom: 0 doesn't change anything for relatively positioned div.
If you wish to use relative positioning, get rid of float and bottom and use display: inline-block and vertical-align: baseline;. Also, in this case, you need to get rid of any space in the HTML between the inner divs (newline).
Like this (you can see the demo at http://dabblet.com/gist/2779082 ):
HTML
<div class="graph">
<div style="height: 22px;" class="bar"></div><!--
--><div style="height: 11px;" class="bar"></div><!--
--><div style="height: 6px;" class="bar"></div><!--
--><div style="height: 49px;" class="bar"></div><!--
--><div style="height: 28px;" class="bar"></div>
</div>
CSS
.graph {
width: 50px;
height: 50px;
border: 1px solid #aeaeae;
background-color: #eaeaea;
}
.bar {
width: 8px;
margin: 1px;
display: inline-block;
position: relative;
background-color: #aeaeae;
vertical-align: baseline;
}
I would personally avoid setting xpos explicitly on every element, makes things less maintainable. In some scenarious percentage-basedvalue dumps would be more appropriate too. With that in mind, an imo more scalable and semanticaly correct approach has been mocked up in a fiddle. HTML:
<ul class="graph">
<li><span style="height:45%"></span></li>
<li><span style="height:12%"></span></li>
<!--as many more items as you want !-->
</ul>
and CSS:
.graph {
border: 1px solid #aeaeae; background-color: #eaeaea;/*"canvas" styling*/
float:left; /*should be clearfix'd instead, but this is OK for a demo*/
}
.graph li {
width:8px; height:50px; /*set a bar width and a full height*/
float:left; /*to have bars "left-aligned"*/
position:relative; /*needed for the actual bar fill element*/
margin:2px;
}
.graph li+li {
margin-left:0; /*avoid margin double-up between bars as they don't collapse*/
}
.graph span {
position:absolute;right:0;bottom:0;left:0; /*"bottom-align" the bars,
widths will be set inline*/
background-color: #aeaeae;
}
This also gives you potential to get quite fancy - bars could have content with a negative text indent for semantic value or <span> elements could be abandoned altogether in favor of pseudo-elements.
Kolink's answer is correct. Each bar div's width is 8px, plus margin-left and margin-right, 8+1+1=10px. So I suggest, set the left value to 0px, 10px, 20px ...
<div class="wrapper">
<div style=" left:0px;height:22px;"></div>
<div style="left:10px;height:11px;"></div>
<div style="left:20px;height:6px;"></div>
<div style="left:30px;height:49px;"></div>
<div style="left:40px;height:28px;"></div>
</div>
The css should look like this(I grouped some general css rules):
.wrapper{
border: 1px solid #aeaeae;
background-color: #eaeaea;
width: 50px;
height: 50px;
position : relative;
}
.wrapper > div{
bottom: 0px;
width: 8px;
position : absolute;
background-color: #aeaeae;
margin: 1px;
display : inline-block;
}
You can check this link: http://jsfiddle.net/zhujy_8833/AFbt4/ to see the result of the above code.
If you give the parent position: relative, then you can use position: absolute for child div to place them in precise coordinates by setting left, top, right, bottom, width, height you can precisely control the placement of the bars in your bar chart.
.graph {
position: relative;
width: 54px;
height: 54px;
border: 1px solid blue;
background-color: lightgrey;
}
.bar {
position: absolute;
border: 1px solid blue;
background-color: yellow;
}
<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="bottom: 0; left: 0; width: 8px; height: 22px"></div>
<div class="bar" style="bottom: 0; left: 10px; width: 8px; height: 11px"></div>
<div class="bar" style="bottom: 0; left: 20px; width: 8px; height: 6px"></div>
<div class="bar" style="bottom: 0; left: 30px; width: 8px; height: 49px"></div>
<div class="bar" style="bottom: 0; left: 40px; width: 8px; height: 28px"></div>
</div>
</div>
<p></p>
<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="left: 0; top: 0; height: 8px; width: 22px"></div>
<div class="bar" style="left: 0; top: 10px; height: 8px; width: 11px"></div>
<div class="bar" style="left: 0; top: 20px; height: 8px; width: 6px"></div>
<div class="bar" style="left: 0; top: 30px; height: 8px; width: 49px"></div>
<div class="bar" style="left: 0; top: 40px; height: 8px; width: 28px"></div>
</div>
</div>
Use position: absolute, and instead of float:left; use left: 0px;, 8px, 16px and so on.
Also add position: relative to the container.