I've been playing with both and I still can't seem to grasp the idea of them.
When I'm trying to make everything stay centered no matter what screen resolution you are looking at, I usually put in width with 0 auto. BUT - If I have the same property with absolute, it completely ignores this value and does not work.
So how exactly am I supposed to position an image on TOP of another image while making sure to keep it all centered for all screen resolutions as WELL as not using absolute?
EDIT: I'm trying to get the little news widget and the teamspeak widget to stay in the middle of the body.
HTML
<body>
<div id="page-wrap">
<div id="header">
<img src="images/header.png" />
</div>
<img src="images/navbar.png" />
<ul id="nav">
<li>Home</li>
<li>Forums</li>
<li>Members</li>
<li>Streams</li>
<li>Contact Us</li>
</ul>
<div id="mainbody">
<img src="images/mainbody.png" /></div>
<div class="news1">
<img src="images/news1.png" /></div>
<div class="teamspeak"> <!--Teamspeak IMG-->
<img src="images/teamspeak.png" /></div>
<div id="ts3viewer_1037062" /></div> <!-- Teamspeak Widget -->
<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1037062&text=000000&text_size=12&text_family=2&js=1&text_s_color=ffffff&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=ffffff&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=ffffff&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=ffffff&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=ffffff&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=ffffff&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=ffffff&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=ffffff&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 1037062, 100);
-->
</script>
<div id="footer">
<p>©2014 Rythmn Designs<p>
</div>
</body>
CSS
body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}
.clear
{
clear:both;
}
#page-wrap
{
width: 1019px;
margin: 0 auto;
}
#header
{
width:100%;
text-align: center;
display: block;
}
#nav
{
height: 0.1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}
#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size: 14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}
#nav li a:hover, #nav li a:active
{
color: red;
}
#mainbody
{
vertical-align:top;
position:relative
}
.news1
{
position: absolute;
top: 435px;
right: 815px
}
.teamspeak
{
position: absolute;
top: 435px;
right: 470px
}
#ts3viewer_1037062
{
position:absolute;
top: 465px;
right: 478px;
width: 290px;
height:190px;
overflow:auto;
}
#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size: 12px;
position: relative;
}
You could go about it a different way and use nested <DIV> tags, such as:
<div id="outer">
<div id="inner">
</div>
</div>
And then add your images to the CSS. See e.g. jsFiddle.
For an absolutely positioned element, assuming a fixed width
left: 50%;
margin-left: -[width/2];
left puts its left border in the middle of the screen; negative margin pulls it back to the left by half its width, centering it.
absolute positioning allows top, right, bottom, left properties to be defined relative to the window or to a containing element.
relative allows the same properties to be defined relative to where the element would normally appear in the document flow.
Related
I have the following page (see code snippet below). I would like to position each of the items, so that when it is a full web page, the elements are i their desired positions, but as soon as it is viewed on narrow aspect ratio (e.g. mobile phone), then the items need to fold under each other.
I can get a full web page working, using position: absolute;. I can position the items where I want. But the problem is then on a mobile devise, the items overlap each other. So I figure I need to use position: relative;.
position: relative; allows the items to fold beneath each other on a narrow browser. However, I cannot seem to position the items where I want.
In the below example, I would like to position the items as follows:
logo
title
text screen-print-one
google apple web screen-print-two
Terms of Service some#email.com
body {
font-family: "proxima-nova" ,"Helvetica", sans-serif;
}
/* logo */
.wz-logo {
text-align: center;
padding: 20px 20px 0px 20px;
}
/* title */
.wz-title {
font-size: 120%;
color: #B2D137;
text-align: center;
padding: 0 20px 40px 30px;
}
/* text */
.text-description {
padding-left: 10%;
padding-bottom: 20px;
padding-top: 20px;
width: 500px;
}
/* screen-prints */
.screen-prints {
position: relative;
float: right;
padding-right: 10%;
}
.screen-print1 {
position: relative;
top: 100px;
left: 0;
z-index: 2;
}
.screen-print2 {
position: relative;
top: -430px;
left: -120px;
z-index: 1;
}
/* store */
.store-container {
display: flex;
justify-content: left;
align-items: center;
padding-left: 10%;
}
.store-container .apple, .img-container .google, .img-container .web {
padding: 10px;
padding-left: 20px;
}
.store-container .google {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 10px;
}
.store-container .apple {
padding-top: 8px;
padding-left: 0px;
padding-right: 0px;
}
.store-container .web {
padding-top: 15px;
}
/* footer */
footer .terms, footer .contact {
display:inline-block;
padding-bottom: 30px;
padding-right: 10px;
padding-left: 10px;
}
footer .contact {
padding-right: 40px !important;
}
footer a {
color: white;
text-decoration: none;
font-size: 14px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
footer {
position:absolute;
bottom:0;
right: 0;
}
<body class="background-image">
<div class="wz-logo">
logo
</div>
<div class="wz-title">
title
</div>
<div class="text-description">
text
</div>
<div class="screen-prints">
<div class="screen-print1">screen-print-one
</div>
<div class="screen-print2">screen-print-two
</div>
</div>
<div class="store-container">
<div class="google">
google
</div>
<div class="apple">
apple
</div>
<div class="web">
web
</div>
</div>
<footer>
<div class="terms">
Terms of Service
</div>
<div class="contact">
some#email.com
</div>
</footer>
</body>
If anyone can assist with how I can position the items, I would appreciate the help. (As you can see my main problem is trying to position the screen-print-one & screen-print-two).
Thanks
hmm there are a bunch of problems with your html logic. too many divs and not wrapped logically . but i made what i could with it
see below. or jsFiddle
.wz-logo,.wz-title {
width:100%;
float:left;
text-align:center;
}
.left_text {
float:left;width:50%;
}
.left_text .store-container div{
display:inline
}
.screen-prints {
float:right;
width:50%;
text-align:right;
}
footer {
float:left;
width:100%;
text-align:right
}
footer div {
display:inline
}
#media only screen and (max-width: 460px) {
.left_text,.screen-prints,footer {
width:100%;
text-align:center;
}
}
<body class="background-image">
<div class="wz-logo">
logo
</div>
<div class="wz-title">
title
</div>
<div class="left_text">
<div class="text-description">
text
</div>
<div class="store-container">
<div class="google">
google
</div>
<div class="apple">
apple
</div>
<div class="web">
web
</div>
</div>
</div>
<div class="screen-prints">
<div class="screen-print1">screen-print-one
</div>
<div class="screen-print2">screen-print-two
</div>
</div>
<footer>
<div class="terms">
Terms of Service
</div>
<div class="contact">
some#email.com
</div>
</footer>
</body>
i suggest you use bootstrap for responsiveness . it's much easier to use
I have a fixed header that I've set up with a higher z-index than the body content so the content slips underneath it. In order to position the content div right below the fixed header, I set its position:relative and gave it a top value
This seemed to work fine, until I started to add items to the content div. First I added an h1 and as I attempted to give it a little margin-top the entire page (header and all) shifted down the value I specified for my margin-top.
I've run into this before (collapsing divs yes?) and I've usually been able to fix it with a set width or a float or a display block, but none of these seem to be doing the trick.
Can someone tell me what I am missing?
*
{
padding: 0;
margin: 0;
}
header
{
background-color: white;
color: #724444;
width: 100%;
height: 90px;
border-bottom: 1px solid rgba(140, 140, 140, .2);
position: fixed;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 1.3;
z-index: 1000;
}
#header-fixedWidth
{
width: 1000px;
height: 90px;
margin: 0 auto;
display:flex;
align-items: center;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
nav ul
{
list-style: none;
display: flex;
}
nav ul li
{
margin: 0 10px;
}
#main-content
{
width: 100%;
min-height: 100px;
position: relative;
top: 89px;
}
#main-content-fixedWidth
{
width: 1000px;
min-height: 100px;
margin: 0 auto;
position: relative;
}
.headers
{
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 1.3;
margin-top: 20px;
}
#image-deck
{
width: 1000px;
border: 1px solid #ccc;
position: relative;
display: block;
}
/*Media Queries*/
#media (max-width: 1000px)
{
header
{
width: 100%;
}
#header-fixedWidth
{
width: 100%;
}
}
<html>
<head>
<title>Pic Monkey Recreation</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
</head>
<body>
<header>
<div id="header-fixedWidth"
<img src="Images/logo.png" alt="randomLogo" id="randomLogo" />
<nav>
<ul>
<li>
<img src="Images/iconMenu/edit.png" alt="">
<br>
<p>Edit</p>
</li>
<li>
<img src="Images/iconMenu/touchUps.png" alt="">
<br>
<p>Touch Up</p>
</li>
<li>
<img src="Images/iconMenu/design.png" alt="">
<br>
<p>Design</p>
</li>
<li>
<img src="Images/iconMenu/collage.png" alt="">
<br>
<p>Collage</p>
</li>
</ul>
</nav>
<div id="user-help">
<img src="Images/signIn.png" alt="signIn" id="signIn" />
</div>
</div>
</header>
<div id="main-content">
<div id="main-content-fixedWidth">
<div id="test">
<p class="headers">Here is a header for you to look at</p>
</div>
<div id="image-deck"></div>
</div>
</div>
</body>
</html>
You will need a counter minus margin to offset the amount you have moved it. So if your box has a top value 50px and your inner h1 have a margin-top value 100px you'd need to reset your box top value to -50px to counter.
I am having trouble getting my image to be on the right side of the information that I am trying to display. My CSS skills are lacking and becoming more and more apparent, so the help is very appreciated.
Here is my HTML
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b><p>...</p></li>
<li><b>Facility Name</b><p>...</p></li>
<li><b>Address</b><p>...</p></li>
<li><b>City</b><p>...</p></li>
<li><b>Province</b><p>...</p></li>
<li><b>Postal Code</b><p>...</p></li>
<li><b>Roof Area</b><p>...</p></li>
<li><b>Roof Area Inspected</b><p>...</p></li>
<li><b>Last Inspected</b><p>...</p></li>
<li><b>Inspected By</b><p>...</p></li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250"/>
</div>
<br />
</div>
</div>
</div>
I am trying to get #facility_image to "float" to the right side of #facility_data.
Here is my CSS
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float:left;
}
#facility_data{
width: 375px;
margin: 0 !important;
}
/*facility image*/
#facility_image {
margin-top: 100px;
margin-left: 400px;
width: 350px;
padding: 5px;
float: left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper{
text-align: center;
}
Here is a JSfiddle.
How can I float my image to the right hand side of the data I am trying to display?
You are setting a huge margin to the image div that is putting it way down the screen.
Let the #facility_data take 60% of the container div and float left, and let the image take the other 37% and remove the margin. You also need to give some margin right for #facility_data to keep some space between the 2 divisions :
#facility_image {
/*margin-top: 100px; <<<<< huge margin
margin-left: 400px;<<<<< huge margin*/
width: 37%;
padding: 5px;
float: left;
}
#facility_data
{
width:60%;
margin-right:2%;
float:left;
}
Working example :
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float:left;
}
#facility_data{
width: 375px;
margin: 0 !important;
}
/*facility image*/
#facility_image {
width: 37%;
padding: 5px;
float: left;
}
#facility_data
{
width:60%;
margin-right:2%;
float:left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper{
text-align: center;
}
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b><p>...</p></li>
<li><b>Facility Name</b><p>...</p></li>
<li><b>Address</b><p>...</p></li>
<li><b>City</b><p>...</p></li>
<li><b>Province</b><p>...</p></li>
<li><b>Postal Code</b><p>...</p></li>
<li><b>Roof Area</b><p>...</p></li>
<li><b>Roof Area Inspected</b><p>...</p></li>
<li><b>Last Inspected</b><p>...</p></li>
<li><b>Inspected By</b><p>...</p></li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250"/>
</div>
<br />
</div>
</div>
</div>
Use display: inline-block to place the image horizontally with the data. Remove the margin set for the image since the image is already inside the parent container. Give a float: left for both the elements as the data comes first in the DOM, the image will go to the right.
#facility_general_info {
padding: 5px;
float: left;
width: 750px;
line-height: 110%;
}
#facility_info ul {
margin-left: -40px;
list-style-type: none;
}
#facility_info h3 {
color: #0d55b7;
border-bottom: 2px solid #0d55b7;
}
#facility_info {
margin-left: 50px;
width: 750px;
float: left; /* Add */
}
#facility_data {
width: 375px;
margin: 0 !important;
display: inline-block; /* Add */
float: left; /* Add */
}
/*facility image*/
#facility_image {
width: 350px;
padding: 5px;
float: left;
}
#fac_image_wrapper p {
width: 250px;
}
#fac_image_wrapper {
text-align: center;
}
<div id="facility_general_info">
<div id="facility_info">
<h3>Facility Information</h3>
<div id="facility_data">
<ul>
<li><b>Facility Number</b>
<p>...</p>
</li>
<li><b>Facility Name</b>
<p>...</p>
</li>
<li><b>Address</b>
<p>...</p>
</li>
<li><b>City</b>
<p>...</p>
</li>
<li><b>Province</b>
<p>...</p>
</li>
<li><b>Postal Code</b>
<p>...</p>
</li>
<li><b>Roof Area</b>
<p>...</p>
</li>
<li><b>Roof Area Inspected</b>
<p>...</p>
</li>
<li><b>Last Inspected</b>
<p>...</p>
</li>
<li><b>Inspected By</b>
<p>...</p>
</li>
<ul>
</div>
<!--facility front image-->
<div id="facility_image">
<div id="fac_image_wrapper">
<img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250" />
</div>
<br />
</div>
</div>
</div>
you have lacked float
#facility_data {
float: left;
}
#facility_image {
margin-top: 0;
margin-left: 0;
}
although not the best technique, you can learn to use FlexBox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've tidied up your JSFiddle, removing some of the unecessary HTML elements and also fixing an error in the HTML, which was the second <ul>. It should have been </ul>to close the list.
In the jsfiddle, we can see the following reduced css as an example:
.facility_info {
width: 800px;
}
.facility-list {
float:left;
width: 400px;
}
.facility-image {
width: 350px;
float: right;
}
.facility_info is wide enough to accomodate both the defined child widths and also the browser default <ul> styling which adds a margin.
Then the two children are floated left and right respectively. The selectors are added directly to the <ul> and <img /> tags as you don't need wrappers (though you could wrap these children and apply the css to the wrapper).
I've used classes rather than ids, this is better in the long run as it makes it easier to maintain css on a project. IDs add styles in a way that is hard to over-ride, can't be re-used and are unnecessary for styling.
Apart from this, you were also suffering a bit from the default css properties added to html elements by browsers. Loading a reset.css file will help with this. A reset css declaration loads some defaults at the top of the css file that set various values to 0 to over-ride the default properties set by the browser. It gives you a more consistent and less confusing base to start styling from
I've got a bunch of divs, one after the next, each with an image inside it. When I set min-height to a value higher than the height of the image, everything works fine:
But if I have it set to 50px while the image is 100+px, the images kind of "cascade"
What can I do to force the div to be at least as tall as the image inside it?
CSS
body {
background: #cccccc;
margin: 0px;
}
a {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
}
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
}
.post {
padding-top: 10px;
/*background-color: #ff0000;*/
}
.postimage {
float: left;
padding-right: 10px;
}
.postcomment {
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="reply">
One
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Two
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Three
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Four
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
</body>
</html>
Add clear: left to your div.
See this?
.postimage {
float: left;
padding-right: 10px;
}
When you float the contents of the div, the div does not stretch vertically to accommodate.
So, adding this:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
clear: left;
}
Will resolve the issue.
Alternate solution
Another solution which I tend to prefer is to use the overflow hack, rather than clear:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
width: 100%;
overflow: hidden;
}
You would expect that this would hide the part of the image below the div, but it has a different result: The overflow: hidden does not hide the contents, but rather causes the div to stretch down to contain the entire image.
Note: for this method to work on older browsers, you must specify a width (notice that I added that in the css above).
I am trying to align multiple divs (buttonNav) to the bottom of a container div (lowerNav). I have read every question on here regarding this and tried the CSS and it does not seem to work. I tried this one: Stacking Divs from Bottom to Top amoung others, hoping someone can help.
Here is my html, I have 5 of the lowerNav containers each with multiple buttonNavs that I want to align to the bottom of the lowerNav here is the code from one, they are all set up the same way:
<div class="lowerNav">
<img src="image/contact-us.gif" width="126" height="27" alt=""/>
<p>Ready to get more information or contact us directly?</p>
<div class="buttonNav">
<p>Order Literature</p>
</div>
<div class="buttonNav">
<p>Downloads</p>
</div>
<div class="buttonNav">
<p>Email Sign-Up</p>
</div>
<div class="buttonNav">
<p>Meet Your Rep</p>
</div>
<div class="buttonNav">
<p>Ask a Question</p>
</div>
</div>
Here is my CSS:
.lowerNav {
width: 160px;
height: 325px;
background-color: #e3dfd7;
border: 3px solid #383431;
float: left;
margin: 15px 8px 0px 8px;
text-align: left;
display: table-cell;
vertical-align: bottom;
}
.lowerNav p {
padding: 5px 12px 12px 12px;
}
.lowerNav img {
padding-top: 12px;
}
.buttonNav {
background:url(image/button-lowerNav.jpg);
width: 160px;
height: 45px;
display: inline-block;
}
.buttonNav p {
text-align:center;
padding-top: 14px;
}
.buttonNav a {
color: #fff;
font-size: 13px;
text-decoration:none;
font-weight:700;
}
.buttonNav a:hover {
color: #fff;
font-size: 13px;
text-decoration:underline;
font-weight:700;
}
Since the container (.lowerNav) has a fixed height and you know the size of its content this is quite easy to do with absolute positioning.
HTML:
<div class="outer">
Hello up here!
<ul class="inner">
<li>Hello</li>
<li>down</li>
<li>there!</li>
</ul>
</div>
CSS:
.outer {
position: relative;
height: 200px;
}
.inner {
position: absolute;
bottom: 0;
}
Check this CodePen for a live example of this code: http://codepen.io/EvilOatmeal/pen/fCzIv