I have a two column layout (data on left and nav on right). Renders correctly on Safari desktop but Safari for iPhone the right column is rendered at the bottom of the page underneath the data.
The basic code template is:
<body>
<div class="colmask rightmenu">
<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<div class="ui-body ui-body-e">
<div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="b">
some data here
</div>
</div>
<!-- Column 1 end -->
</div>
<div class="col2">
<!-- Column 2 start -->
<div class="ui-body ui-body-b">
nav stuff here
</div>
<!-- Column 2 end -->
</div>
</div>
</div>
</body>
Problem is the same whatever the viewport width is set at (currently 100&%)
Here is the CSS:
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#fff;
font-size:90%;
}
a {
color:#369;
}
a:hover {
color:#fff;
background:#369;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
#ads img {
display:block;
padding-top:10px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* 2 Column (right menu) settings */
.rightmenu {
background:#eee; /* right column background colour */
}
.rightmenu .colleft {
right:25%; /* right column width */
background:#fff; /* left column background colour */
}
.rightmenu .col1 {
width:71%;
left:27%; /* (right column width) plus (left column left padding) */
}
.rightmenu .col2 {
width:21%;
left:31%;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
The reason you may be having an issue with this is because the iPhone and iTouch compared to the computer has a different resolution setting than a generic computer.
http://en.wikipedia.org/wiki/IPod_Touch
http://en.wikipedia.org/wiki/IPhone
If you don't set up your template to recognize specifics such as mobile computers, or monitor resolutions, you will never get your CSS to render correctly for the screen you are viewing at the time.
Even though you have it set at 100%, you have different settings in your CSS that an iphone, or iTouch may not recognize as well, so you may want to look into that.
I've been working on creating something that is both computer and iPhone/iTouch friendly, and it is not easy. You'll spend 10 minutes writing the script, 30 min to two days perfecting it.
You may want to look into this:
Detect iPhone/iPad purely by css
Related
I set the image header width to 100% and when i check the max-width of 959px or lower[i set it to that] i notice the image does not respond and move along like it should. It actually gets even bigger than normal for some reason. My aside and section are working properly however.
jsfiddle - http://jsfiddle.net/u04xr6pd/2/
<div class="container">
<header>
<img src="images/header.png" alt="taffies logo">
</header> <!-- end of header -->
</div>
CSS
#media screen and (max-width:959px){
.container{
width:100%;
}
.sidebar{
width:30%;
}
.first_article{
width:50%;
}
header img{
width:100%;
}
}
I would recommend this code...
header img{
width:calc(100% - 50px);
margin:0 auto !important;
}
and apply that EXACT same width to this class .first_article to make it more responsive.
You also have this code in your CSS:
header img {
padding: 43px;
margin-left: 260px;
}
So when your window width is less than 959px, your image will have width: 100% but also the padding and margin, pushing it to the right. You need to add rules for padding and margin in your #media code as well. Something like:
#media screen and (max-width: 959px) {
header img {
width: 100%;
padding: 0 !important;
margin: 0 !impotant;
}
}
Adjust the numbers as needed.
The !important is there because you've defined the #media section first, which would then be overridden by the normal rules defined later. If you move the #media section below the normal rules, then you don't need !important.
You have several misconceptions, but I can see you're trying and learning, so I want to give you some recognition on that. Now, for your problem, there are some thing to change, but the most important part: media queries goes AFTER the default definitions, not at the top, or you'll always have issues. So you need to change that, and then alter some things in your CSS, just not as many as when you started with this project a week ago or so. So take a look at your forked and cleaned fiddle
* {
margin:0px;
padding:0px;
list-style-type:none;
}
header, nav, section, article, aside, footer {
display:block;
}
.container {
width:960px;
margin:0 auto;
}
body {
background-color:#e8d4cb;
}
header img {
padding:43px;
margin-left:260px;
}
.first_article {
float:left;
width:500px;
margin:25px;
}
.first_main_paragraph {
font-family:arial;
font-size:20px;
color:#846a5f;
margin-bottom:50px;
}
.second_main_paragraph {
font-family:arial;
font-size:13px;
color:#846a5f;
}
.first_article .contact_button {
float:left;
margin-top:165px;
}
.first_article .cupcake {
float:left;
margin-top:20px;
margin-left:19px;
}
.sidebar {
float:left;
margin:30px;
margin-right:40px;
}
nav ul li a {
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;
display:inline-block;
padding-left:85px;
padding-right:29px;
padding-top:26px;
padding-bottom:26px;
width:39%;
}
nav ul li:hover a {
color:#e8d5cc;
}
nav ul li {
margin-bottom:3px;
background-color: #CBAFA2;
}
nav ul li:hover {
background-color: #3D2316;
}
.company_info {
background-color:#cbafa2;
padding:20px;
text-align:right;
margin-bottom:100px;
font-size:14px;
color:#3d2316;
font-family:myriad pro;
}
.about_section {
float:left;
width:500px;
margin:25px;
}
.about_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.about_text {
font-family:arial;
font-size:13px;
color:#846a5f;
}
.orders_section {
float:left;
width:500px;
margin:25px;
}
.orders_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.second_order {
margin-top:50px;
}
.order_text {
font-family:arial;
font-size:11px;
color:#846a5f;
}
.order_numbers {
color:#3D2316;
}
.gallery_section {
float:left;
width:600px;
margin:25px;
}
.gallery_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_section {
float:left;
width:500px;
margin:25px;
}
.contact_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_text {
font-family:arial;
font-size:13px;
color:#846a5f;
}
footer {
clear:both;
font-family:arial;
border-top:1px solid #aa8573;
height:100px;
}
footer p {
color:#784f3d;
margin:10px;
float:left;
margin-right:370px;
margin-top:30px;
}
footer ul li a {
text-decoration:none;
font-size:13px;
color:#784f3d;
float:left;
margin:10px;
margin-top:30px;
}
footer ul li a:hover {
color:#3d2316;
}
figure {
float:left;
margin:25px;
}
figcaption {
text-align:center;
font-family:arial;
font-size:13px;
color:#846a5f;
margin-top:15px;
}
span {
font-family:arial;
font-size:15px;
color:#846a5f;
font-weight:bold;
}
#media screen and (max-width:959px) {
.container {
width:100%;
}
.sidebar {
width:30%;
}
.first_article {
width:50%;
}
header {
text-align:center
}
header img {
width:100%;
max-width:462px;
height:auto;
padding:0px;
margin:0px auto;
}
}
As you will notice, besides moving the media queries, I'm removing your margins and paddings for the image since you don't need them at all, centered everything inside the header and limiting the width of your image so it will be 100% UP to 462px which is the real size of your image. And that's it, your image now is perfectly centered and isn't out of control. And while you still have several issues in your page, you're really close (btw, it's a show of respect to vote up and accept answers since you're getting so much help here)
I have a drop down menu bar. But it is always behind my content no matter how high I set the z-index of the bar or if I set the z-index of my content to -1. Can anybody help?
I did set the z-index to 500 where I do the hover of my navigation top menu but no change. Could it be because of the reset code I use in the beginning of my CSS code?
Here is my CSS Code:
/*navigation.xhtml; author: Mica */
#navigation {
float:left;
width:100%;
height:18px;
margin:15px 0 25px;
}
#navigation ul {
list-style-type:none;
list-style-image:none;
padding:0px;
float:left;
width: 100%;
}
#navigation li.topmenu {
float:left;
width:170px;
}
.topmenu a {
float:left;
width:100%;
text-align:center;
}
.topmenu ul {
float:left;
display:none;
width:100%;
}
.topmenu a, .submenu a, .topmenu:hover .submenu a {
padding:3px 0;
border:1px solid #C27000;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
background-color:#FF8C00;
margin:0;
font-weight:bold;
}
.submenu a{
width:100%;
clear:both;
postition:absolute;
}
#navigation a:hover, .topmenu.on a, .topmenu:hover a {
background-color:#FFA500;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
#logo a:hover {
opacity:0.8;
}
/*content in basicTemplate.xhtml; author: Mica */
#content {
float:left;
min-height:200px;
margin:0 7px;
}
HAHAAA found it!
z-index only works when a position is declared first: so I need to set in this block a position:
.topmenu:hover ul {
display:block;
z-index:500;
}
Like here:
.topmenu:hover ul {
display:block;
position:relative;
z-index:500;
}
I have a certain Header with my Logo and title. Just to the right of the Title Mobility group I want to create a nav bar that touches the bottom of the header with different tabs all the way to the right of the header. Messing around I was able to create something, but I can't seem to position it correctly.
http://jsfiddle.net/jHJK2/
http://jsfiddle.net/jHJK2/embedded/result/
I just can't figure out how to add this navigation bar to my header div.
HTML code:
<div id="page">
<div id="header">
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0 >
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
CSS Code:
html, body {
padding:0;
margin:0;
height:100%;
}
#page {
min-height:100%;
position:relative;
height:100%;
}
#header {
background-color:#115EA2;
height:100px;
width:97.5;
}
#main {
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer {
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img {
float:left;
display:inline;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active {
color: #FFFFFF;
text-decoration: none;
}
Navigation Bar Code:
#navigation {
position:relative;
top:0;
left:0;
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
Update
Just wanted to say Thank you all for your help.
Adapting your current method to a more html5 approach, you can use header and nav tags do better markup your document. Absolute positioning also gives you better control over your elements. You would set the header to a relative position, and the nav to absolute, and offset it by the height of your header.
nav {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
min-width: 800px;
text-align: left;
height: 20px;
padding: 10px 20px;
}
Here is your updated fiddle
And here is an update with the nav to the right, a bit messy though:
http://jsfiddle.net/jHJK2/5/
Not 100% sure if this is how you want it since your request wasn't very clear, but here's what I made.
http://jsfiddle.net/jHJK2/2/
Changes:
HTML:
<div id="header">
<div id="navigation"> //moved this before the other elements
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0>
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
</div>
CSS:
#navigation {
width:100%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
Make the following CSS changes:
Demo in jsFiddle
#header {
background-color:#115EA2;
height:100px;
width:97.5;
position: relative;
}
#navigation {
position:absolute;
/* top:0;
left:0;*/
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
For some reason, my topnav is not the full width of my browser window (it goes almost the full length of the window, but not entirely, on both ends) and also there is a bit of space between it and the top of the browser window.
How do I make it so this is not the case? Here's my code:
#topnav
{
background-color: #A9A9A9;
margin: 0;
margin-bottom: 25;
padding: 0;
}
#topnav ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
#topnav li
{
display:inline;
}
#topnav a:link,a:visited
{
font-weight:bold;
font-size: 12px;
color:#FFFFFF;
background-color:#A9A9A9;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#topnav a:hover,a:active
{
background-color:#808080;
}
Here's the HTML:
<div id="topnav">
<ul>
<li>Index</li>
<liInventory</li>
<li>Check-Up</li>
</ul>
</div>
EDIT: Now the bar extends all across the browser, however there is still a gap up at the top.
Also, the gap is only present in Firefox - it does not show up in Chrome. My whole thing is messed up in IE.
to the top problem try this:
#topnav {
background-color: #A9A9A9;
margin: 0;
margin-bottom: 25;
padding: 0;
position:absolute;
top:0;
}
the #topnav -> margin & padding should be deleted since it is 0. The same counts for #topnav ul.
You could incorporate your navigation pane in a div which has a width of 100%. Let me know if that works for you.
-- Edit: This should work in FF/Chrome/IE (just tested it)
<html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#topnav
{
background-color: #A9A9A9;
margin-bottom: 25;
width:100%;
top:0;
}
#topnav ul
{
list-style-type:none;
padding-top:6px;
padding-bottom:6px;
}
#topnav li
{
display:inline;
}
#topnav a:link,a:visited
{
font-weight:bold;
font-size: 12px;
color:#FFFFFF;
background-color:#A9A9A9;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#topnav a:hover,a:active
{
background-color:#808080;
}
</style>
<head/>
<body>
<div id="topnav">
<ul>
<li>Index</li>
<liInventory</li>
<li>Check-Up</li>
</ul>
</div>
</body>
</html>
I am sure this is a common frustration - but I am trying to just do a two column liquid with a footer in rails.
The problem that I am having is that I can get the footer to stick on the bottom, or to the columns. I am using this for my basis for the columns, I just need them to stretch to the bottom of the page, filling with color!!
The layout for the frame:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Shows: <%= controller.action_name %> </title>
<%= stylesheet_link_tag 'frame', 'show' %>
</head>
<body>
<div id="header">
</div>
<div class="colmask ">
<div class="colleft">
<div class="main"> <!-- The Main window -->
<% if flash[:notice] -%>
<div id="flash"><%= flash[:notice] %> </div>
<% end -%>
<%= yield %>
</div>
<div class="side"> <!-- The Sidebar -->
<%= link_to "Home", :controller => :shows, :action => :index %><br/>
<br/>
Shows<br/>
<% Show.all.each do |sh| %>
<div class="side_title">
<%= link_to sh.title, show_url(sh) %><br/>
</div>
<% end %>
</div>
<div id="push"></div>
</div>
</div>
<div id="footer"> <!-- Put a footer in this panel -->
This is where some more information can go...
</div>
</body>
</html>
The CSS - probably full of problems...help!?:
/*
Template for layout from
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
Thanks!
*/
html {
height: 100%;
}
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
height: 100%;
}
a {
color:#369;
}
a:hover {
color:#fff;
background:#369;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colleft {
float:left;
width:100%;
position:relative;
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -60px;
}
.main,
.side {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* 2 Column (left menu) settings */
.colmask {
background:orange; /* right column background colour */
}
.colmask .colleft {
right:75%; /* right column width */
background:green; /* left column background colour */
}
.colmask .main {
width:71%; /* right column content width */
left:102%; /* 100% plus left column left padding */
}
.colmask .side {
width:21%; /* left column content width (column width minus left and right padding) */
left:6%; /* (right column left and right padding) plus (left column left padding) */
}
#push, #footer {
height: 60px;
clear: both;
}
/* Footer styles */
#footer {
position:relative;
bottom:0;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
Easiest solution would be, to just add a background image to your wrapper
#left_col, #right_col {
display: inline;
float: left;
margin: 0 10px;
width: 400px;
}
<div id="wrapper">
<div id="left_col">
<!--left_col content-->
</div><!--/left_col-->
<div id="right_col">
<!--right_col content-->
</div><!--/right_col-->
<div style="clear: both"/>
</div><!--/wrapper->
If your code looks like this, just add a y-axis repeating background image to the wrapper.
As far as I know, that is the solution that will produce the least amount of problems.