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
Related
I'm creating a style sheet for use on mobiles and the text needs to be condensed down into one column, rather that the two that are displayed side by side on a desktop.
I'm wondering whether my issue has anything to doing the positioning that I have applied to the divs?
Please see this fiddle http://jsfiddle.net/vtdo8vc0/
#col1 {
position: relative;
display: inline;
float: left;
width: 94%;
padding-right: 3%;
padding-left: 3%;
}
#col2 {
position: relative;
display: inline;
float: left;
width: 94%;
padding-right: 3%;
padding-left: 3%;
}
.col {
font-family: 'Avenir-Book';
font-size: 12px;
line-height: 16px;
font-weight: 500;
}
#main_content {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
#main_content img {
width: 100%;
height: auto;
padding-bottom: 30px;
}
#header {
position: relative;
padding-top: 3%;
padding-left: 3%;
padding-right: 3%;
padding-bottom: 3%;
}
.header {
font-family: 'Avenir-Book';
font-size: 26px;
line-height: 26px;
text-transform: uppercase;
font-weight: 900;
}
<div id="container">
<div id="header">
<div class="header">
food
</div>
</div>
<div id="col1">
<div class="col">
At Danny’s we believe food is very important! Kevin our Head Chef has a wealth of experience and a passion to rival that experience. Wherever possible our food is created using the very best locally sourced ingredients. Whether you are
</div>
</div>
<div id="col2">
<div class="col">
popping in for a lunchtime wrap or a full blown Danny's Burger you can expect the same level of service and attention to detail.
<br>
<br>Check out our menu below.
</div>
</div>
<div id="main_content">
<img src="http://placehold.it/350x150" />
</div>
</div>
If I understand correctly, you want the two columns to behave like they're ons wall of text, at least on narrower screens. Then the solution would be to make #col1, #col2 and .col inline and dispense with the floats.
#col1,
#col2 {
position: relative;
display: inline;
}
.col {
display: inline;
font: 500 12px/16px'Avenir-Book', sans-serif;
}
#main_content {
padding: 0 10px 10px 10px;
}
#main_content img {
width: 100%;
height: auto;
padding-bottom: 30px;
}
#header {
position: relative;
padding: 3%;
}
.header {
font: 900 26px/26px'Avenir-Book', sans-serif;
text-transform: uppercase;
}
#media all and (min-width: 50em) {
/* change into 2 columns on wider screens */
#col1,
#col2 {
display: block;
float: left;
width: 47%;
padding: 0 3%;
box-sizing: border-box;
}
}
<div id="container">
<div id="header">
<div class="header">
food
</div>
</div>
<div id="col1">
<div class="col">
At Danny’s we believe food is very important! Kevin our Head Chef has a wealth of experience and a passion to rival that experience. Wherever possible our food is created using the very best locally sourced ingredients. Whether you are
</div>
</div>
<div id="col2">
<div class="col">
popping in for a lunchtime wrap or a full blown Danny's Burger you can expect the same level of service and attention to detail.
<br>
<br>Check out our menu below.
</div>
</div>
<div id="main_content">
<img src="http://placehold.it/350x150" />
</div>
</div>
I am realtively new to HTML/CSS and working on a responsive site. I'm sure I have some improper techniques at this point but aesthetically things are working okay for me so far. MY problem is functional when my screen size gets below full view. Around 768 only 1 link (the contact link) seems to work and I'm not sure why. Any help would be much appreciated! Thanks!
HTML:
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>my<br/>name</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>Feature</p>
</div>
<div class="article column1">
<p>Column One</p>
</div>
<div class="article column2">
<p>Column Two</p>
</div>
<div class="article column3">
<p>Column Three</p>
</div>
</div>
<div id="footer">
<p>Footer Text</p>
</div>
</div>
</body>
</html>
CSS:
body {
max-width: 90%;
margin: 0 auto;
font-size: 100%;
}
h1 {
font-family: 'bikoblack';
text-transform: uppercase;
font-size: 3em;
line-height: 85%;
color: #2d9471;
background-color: #1a5642;
float: left;
padding: 1em;
}
#header {
overflow: hidden;
z-index: "";
}
#nav {
position: relative;
top: 11em;
margin-bottom: 1 em;
}
li {
display: inline;
font-family: 'bikoregular';
color: #2d9471;
padding: 4em;
}
#feature{
margin: 1%;
background-color: #1a5642;
padding: 5em;
}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;
background-color: #1a5642;
}
.column3 {
margin-right: 0%;}
}
#feature, .article {
margin-bottom: 1em;
}
#media (max-width:480px){
#nav {
position: relative;
top:.05em;
width:200px;
}
}
#media (max-width:767px) and (min-width:481px){
#nav {
position: relative;
top: 5em;
}
}
The list items in your navigation have a large padding and they are also positioned inline. When they break on the next line (because there is not enough horizontal space) they overlap. The padding of the ones coming last in the list extend over the links above and cover them up. That's why you can't click them.
Try this as a quick fix:
li {
display: inline;
font-family: 'bikoregular';
color: #2d9471;
padding: 0 4em; /* removed padding at the top and bottom */
}
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
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.
float breaks out of header on zoom/lower resolutions
how it looks without zoom/res other than 1080p: http://gyazo.com/d3df8ac607362c1c5301f92307d6a636
screenshot: http://gyazo.com/4c4a0f855d312587de9553b74feea2a0
The blackish colour is actually the body...and the header colour under that is the 1000px navbar.
HTML
<div id="header">
<div id="header_content">
<div id="header_content_right">
<!-- removed form code, not needed. -->
</div>
<div id="header_content_left">
<!-- removed logo image, not needed. -->
</div>
</div>
</div>
CSS
#header {
background: #008BFF;
padding-bottom: 10px;
}
#header_content {
width: 1000px;
margin: 0 auto;
color: white;
padding-top: 10px;
}
#header_content_left {
color: white;
}
#header_content_left img {
margin-right: 15px;
}
#header_content_right {
float: right;
}
This has been resolved by moving padding-bottom: 10px; from #header to #header_content!