I'm using the following code to render a full background, a box, header and footer. Everything works greats in all browser (ie8+, I don't care for ie7). But in ie8 a 1px border is rendered around the background. Why?
<style type="text/css">
/*
start reset
http://meyerweb.com/eric/tools/css/reset/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
end reset
*/
.header, .footer
{
position: fixed;
z-index: 2;
left: 0px;
width: 100%;
background: white;
opacity: 0.4;
filter: alpha(opacity=40);
}
.header
{
top: 0;
height: 30px;
}
.footer
{
bottom: 0px;
height: 30px;
}
.box
{
position: relative;
float: right;
z-index: 2;
margin: 100px 100px 0 0;
width: 300px;
padding: 20px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
}
.background
{
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.background img
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
p
{
font: 15px/2 Georgia, Serif;
text-indent: 40px;
}
</style>
</head>
<body>
<div class="header">
Vestibulum erat wisi.
</div>
<div class="box">
<p>
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sitamet, wisi. Aenean
fermentum, elit eget tincidunt condimentum, erosipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enimin turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque idcursus faucibus, tortor neque egestas augue, eu vulputate magna
eroseu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsanporttitor,
facilisis luctus, metus.
</p>
</div>
<div class="footer">
Vestibulum erat wisi.
</div>
<div class="background">
<img src="http://mslove88.files.wordpress.com/2011/10/mountain.jpg" alt="" />
</div>
Do you use a reset stylesheet?
Because it can be a body margin/padding setting. Every browser has is own default CSS stylesheet and a reset stylesheet 'resets' it all to 0 making them all the same.
First one in the Google results: http://meyerweb.com/eric/tools/css/reset/
Just place the following code on CSS inside <style> and I hope it will solve your problem.
html { border:none; }
I am also faced the same problem in my site. So i give the values in negative points like as below. Try it. I do it for body section. You may try this for form, div also.
<body style="margin-top: -10px; margin-left: 0px; margin-right: 0px; padding: 0px;>
Change your code like below. Try also on div, form, body tags one by one.
.background img
{
position: absolute;
top: -5;
left: -5;
right: -5;
bottom: -5;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { background: #e3e0ef url('images/bg.png'); font-size: 62.5%; line-height: 1; font-family: Arial, sans-serif; padding-bottom: 65px; }
::selection { background: #d7d0f3; }
::-moz-selection { background: #d7d0f3; }
::-webkit-selection { background: #d7d0f3; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 { font-family: 'Wellfleet', 'Trebuchet MS', Tahoma, Arial, sans-serif; font-size: 2.85em; line-height: 1.6em; font-weight: normal; color: #756f8b; text-shadow: 0px 1px 1px #fff; margin-bottom: 21px; }
p { font-family: Arial, Geneva, Verdana, sans-serif; font-size: 1.3em; line-height: 1.42em; margin-bottom: 12px; font-weight: normal; color: #656565; }
a { color: #896dc6; text-decoration: none; }
a:hover { text-decoration: underline; }
/* page layout structure */
#w { display: block; width: 700px; margin: 0 auto; padding-top: 35px; }
#container {
display: block;
width: 100%;
background: #fff;
padding: 14px 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
/* comments area */
#comments { display: block; }
#comments .cmmnt, ul .cmmnt, ul ul .cmmnt { display: block; position: relative; padding-left: 65px; border-top: 1px solid #ddd; }
#comments .cmmnt .avatar { position: absolute; top: 8px; left: 0; }
#comments .cmmnt .avatar img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#comments .cmmnt .avatar a:hover img { opacity: 0.77; }
#comments .cmmnt .cmmnt-content { padding: 0px 3px; padding-bottom: 12px; padding-top: 8px; }
#comments .cmmnt .cmmnt-content header { font-size: 1.3em; display: block; margin-bottom: 8px; }
#comments .cmmnt .cmmnt-content header .pubdate { color: #777; }
#comments .cmmnt .cmmnt-content header .userlink { font-weight: bold; }
#comments .cmmnt .replies { margin-bottom: 7px; }
<div id="w">
<h1>Threaded Comments Block</h1>
<div id="container">
<ul id="comments">
<li class="cmmnt">
<div class="avatar"><img src="images/dark-cubes.png" width="55" height="55" alt="DarkCubes photo avatar"></div>
<div class="cmmnt-content">
<header>DarkCubes - <span class="pubdate">posted 1 week ago</span></header>
<p>Ut nec interdum libero. Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus. Cras lacinia lorem sit amet augue mattis vel cursus enim laoreet. Vestibulum faucibus scelerisque nisi vel sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque massa ac justo tempor eu pretium massa accumsan. In pharetra mattis mi et ultricies. Nunc vel eleifend augue. Donec venenatis egestas iaculis.</p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/pig.png" width="55" height="55" alt="Sir_Pig photo avatar"></div>
<div class="cmmnt-content">
<header>Sir_Pig - <span class="pubdate">posted 1 day ago</span></header>
<p>Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus.</p>
<p>Morbi id neque nisl, nec fringilla lorem. Duis molestie sodales leo a blandit. Mauris sit amet ultricies libero. Etiam quis diam in lacus molestie fermentum non vel quam.</p>
</div>
</li>
</ul>
</li>
<li class="cmmnt">
<div class="avatar"><img src="images/pikabob.png" width="55" height="55" alt="pikabob photo avatar"></div>
<div class="cmmnt-content">
<header>Pikabob - <span class="pubdate">posted 6 days ago</span></header>
<p>Listen you are going to get a kick out of this one. I've got to tell one of the funniest jokes of all time.</a></p>
</div>
</li>
<li class="cmmnt">
<div class="avatar"><img src="images/default.png" width="55" height="55" alt="default avatar"></div>
<div class="cmmnt-content">
<header>MyUsername - <span class="pubdate">posted 5 days ago</span></header>
<p>This is another anonymous comment. Maybe we can place <strong>some bold text</strong>. Then afterwards we can do some <u>underlined text</u>. And even a link to Google.</a></p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/good-news-everyone.png" width="55" height="55" alt="Professor photo avatar"></div>
<div class="cmmnt-content">
<header>Professor - <span class="pubdate">posted 3 days ago</span></header>
<p>Good news, everyone!</a></p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/default.png" width="55" height="55" alt="default avatar"></div>
<div class="cmmnt-content">
<header>Anonymous1 - <span class="pubdate">posted 2 days ago</span></header>
<p>Smaller third-tier inline threaded comment post. Look how deep we can go.</p>
</div>
</li>
</ul>
</li>
</ul>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/maximus.png" width="55" height="55" alt="Maximus photo avatar"></div>
<div class="cmmnt-content">
<header>Maximus - <span class="pubdate">posted 5 days ago</span></header>
<p>Hey man, just another sub-reply. Okay bye.</p>
</div>
</li>
</ul>
</li>
<li class="cmmnt">
<div class="avatar"><img src="images/default.png" width="55" height="55" alt="default avatar"></div>
<div class="cmmnt-content">
<header>FreddieFantastic - <span class="pubdate">posted 11 hours ago</span></header>
<p>So this is neat.</p>
<p>Hello, world!</p>
</div>
</li>
</ul>
</div>
</div>
I am building a forum site and i found the following tutorial for threaded comments block. The following code is threaded comments block for my website but is not responsive for mobiles phones and tablets.
Can someone help me transform this code to responsive code?
I know that I should use media queries but don't know how to do it.
To be clear i just want an example.
The simplest implementation of media queries would be to put something like this at the bottom of the css that you submitted:
#media screen and (max-width: 767px){
/* YOUR STYLES GO HERE.
* You can now use the exact selectors you use above,
* and when the screen is under 767px wide (such as most phones)
* this CSS will render, rather than the previous code.
*/
}
Also don't forget the meta viewport header.
Ultimately, you will have to choose device widths that you want to break at.
You will also need to figure out what you want to be different on different browsers.
Also, don't forget to test in browsers.
For a good comprehensive primer on the core techniques of responsive, check out google's overview.
image
So I have a div full of main article content with a width of 600px and I would like to have these links as well at the side, I imagine it would be in the same div but I can't seem to get the right effect and need some help with this.
Thanks a lot.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<div id="pagewrap">
<div id="logos">
<img id="logo" src="img/logo.png">
<h1 id="name">Company Name</h1>
<img class="socialmedia" src="img/facebook.png">
<img class="socialmedia" src="img/twitter.png">
<img class="socialmedia" src="img/googleplus.png">
</div>
<div id="header">
<div id="menu-outer">
<div class="table">
<ul id="horizontal-list">
<li>Home</li>
<li>eBooks</li>
<li>Magazines</li>
<li>Movies</li>
<li>Help</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
<div id="content">
<h2>Lorem Ipsum Dolor Sit</h2>
<p id="article-information">posted on 15 May 2015 by Author</p>
<img id="main-article-image" src="img/placeholder.png">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer
fringilla. Integer fringilla. Pellentesque acturpis. Sed elementum, felis quis porttitor
sollicitudin, augue nulla sodales sapien, amet posuere quam purus at lacus. Nam id neque. Morbipulvinar nulla sit amet nisl. Etiam pharetra lacus sed velit
imperdiet bibendum. ed quis elit. In hac habitasse platea dictumst. Maecenas
justo. Donec interdum vestibulum libero. Nam laoreet dui sed
magna. Nam consectetuer mollis dolor. Aenean ligula.
liquam sed erat. Donec interdum vestibulum libero. Mauriset dolor.</p>
<div id="more-links-list">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
</div>
<div id="sidebar">
<h3>A guide to snoopsetting</h3>
<img class="aside-images" src="img/placeholder.png">
<h3>Welcome to the Surveillance State</h3>
<img class="aside-images" src="img/placeholder.png">
</div>
<div id="footer">
</div>
</div>
</bo
dy>
CSS
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#logo {
width: 20%;
height: auto;
position: relative;
right: 25px;
top: 50px;
}
#name {
position: relative;
bottom: 60px;
left: 170px;
font-style: italic;
font-size: 55px;
height: 30px;
}
.socialmedia {
position: relative;
width: 8%;
bottom: 155px;
height: auto;
float: right;
}
#main-article-image {
width: 600px;
height: 450px;
}
.aside-images {
width: 340px;
height: 255px;
}
#more-links-list {
display: inline;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#logos {
height: 160px;
}
#header {
height: 50px;
}
#content {
position: relative;
width: 600px;
float: left;
text-align: justify;
}
#more-links-list {
float:right;
padding: 10px;
margin-left:10px;
margin-bottom:10px;
background:#ddd;
}
#sidebar {
width: 340px;
float: right;
position: relative;
bottom: 34px;
}
#footer {
clear: both;
width: auto;
height: 100px;
}
#article-information {
margin: 0px;
}
h2 {
margin: 0px;
padding-top: 56px;
}
h3 {
margin: 0px;
padding-top: 38px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
width: 16.65%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
#media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
#media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
#media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
/* border & guideline (you can ignore these) */
#header, #content, #sidebar {
margin-bottom: 5px;
}
#footer {
background-color: #eee;
border-style: solid;
border-width: 1px;
}
You can do this by placing a div with float:right; style inside the div that holds your content (article text), I created this example for you:
https://jsfiddle.net/davoscript/tjf56jLw/4/
<p>
<!-- The floating box -->
<div id="more-links-list" style="float:right;">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
<!-- The article content -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer...
</p>
Let me know if that works.
You should probably put the links into an <aside>. This could go below the code for the text in your div and then styled with either a float or positioning. It would then be a matter of getting your styling to allow the text to wrap under the links.
In this fiddle : http://jsfiddle.net/thbuf/110/
The div "test" is appearing before the | element. This is occurring despite that the "test" is added after | . Is there an issue with css ?
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
/*table, tbody, tfoot, thead, tr, th, td*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
html, body {
height: 100%;
background-color:#333;
color:#CCC;
font-family:Myriad Pro, Verdana;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#page{
padding:0 0 100px 0;
}
#content{
padding:15px;
}
#content h1{
font-size:3em;
}
#footer {
position: relative;
bottom:0;
width: 100%;
background-color:#CCC;
color:#333;
padding:20px;
}
<div id='container'>
<div id='page'>
<div id='content'>
<h1>title</h1>
<p>some content would go here</p>
<p>Loet consectetur elementum, faucibus in nulla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
</div>
</div>
<div id='footer'>
<div style="display: inline">here is your footer</div>
<div style="display: inline; float:right;">|</div>
<div style="display: inline; float:right">test</div>
</div>
</div>
That is because of the float: right on both the elements. This makes them act as though they are stacked from the right side of the screen and so the first element in the document order becomes the first from the right followed by the second element.
To reverse them, you just need to reverse the order.
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
/*table, tbody, tfoot, thead, tr, th, td*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
html, body {
height: 100%;
background-color:#333;
color:#CCC;
font-family:Myriad Pro, Verdana;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#page{
padding:0 0 100px 0;
}
#content{
padding:15px;
}
#content h1{
font-size:3em;
}
#footer {
position: relative;
bottom:0;
width: 100%;
background-color:#CCC;
color:#333;
padding:20px;
}
<div id='page'>
<div id='content'>
<h1>title</h1>
<p>some content would go here</p>
<p>Loet consectetur elementum, faucibus in nulla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
</div>
</div>
<div id='footer'>
<div style="display: inline">here is your footer</div>
<div style="display: inline; float:right">test</div>
<div style="display: inline; float:right">test</div>
</div>
Just add new div to contain the sub divs like so:
<div style="float:right">
Hind the working fiddle: here
I've got a simple page with a header element consisting of a logo image within an anchor tag nested in a h1 element and a nav element with 4 links. Below that I've got two elements each holding an image and text. I'm wondering why my header breaks apart when I resize the browser window, and why the text is not wrap around their respect images and landing to the right of them. I've also noticed that when I hover passed the logo there's a slight area where it is still a link where it shouldn't be. I'd really appreciate any assistance here, as I'm looking to understand what's happening under the hood with the css.
http://s27.postimg.org/7eyff3ivn/header_break1.png
http://s28.postimg.org/fwg9lohjh/header_break2.png
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Acme</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="layout.css">
</head>
<body>
<header>
<h1><img src="images/logo.png" alt="Respond"></h1>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
<section class="first">
<h2>Image 1</h2>
<figure>
<img src="images/featured.png" alt="Image 1" />
</figure>
<p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam<br>
melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br>
autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br>
mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br>
libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br>
at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>
</section>
<section class="second">
<h2>Image 2</h2>
<figure>
<img src="images/featured.png" alt="Image 2" />
</figure>
<p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam
melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br>
autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br>
mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br>
libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br>
at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>
</section>
<footer>
<p id="copyright">© 2014 ACME</p>
</footer>
</body>
</html>
CSS
/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 16px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Structure */
body {
font-family: Helvetica Neue, Helvetica, Arial;
background: white;
color: #555;
}
header {
width: 100%;
overflow: auto;
border-bottom: 1px solid black;
}
/* Logo H1 */
header h1 {
float: left;
}
header h1 a {
display: block;
text-decoration: none;
margin-top: .5em;
margin-left: 5.5em;
width: 25%;
}
/* Navigation*/
nav {
width: 75%;
overflow: auto;
}
ul {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 20em;
}
ul li {
float: left;
}
ul li a {
display: block;
text-decoration: none;
margin: 5px;
margin-top: 1.5em;
padding: 2px;
font-size: 1.2em;
}
ul li a:hover {
border-bottom: 1px solid #6FC36E;
}
/* Content*/
section {
text-align: center;
margin: 0.625em auto;
overflow: auto;
}
section h2 {
margin-top: 1em;
margin-bottom: 1em;
}
section img {
max-width: 100%;
}
.first {
width: 45%;
float: left;
margin-left: 2%;
}
.first figure {
width: 75%;
}
.second {
width: 45%;
float: left;
margin-left: 2%;
}
.second figure {
width: 75%;
}
/* Footer*/
footer {
clear: both;
text-align: center;
}
This answer only addresses the problems you are having with your navigation.
I would remove the following properties from ul in your css.
float: right;
margin-right: 20em;
You don't need to float the menu to the right and the margin decreases the available space for your menu. The 75% width you set in your CSS should do enough to constrain your menu size.
The only wrapping of your nav that will occur is when the width of nav is less than the width of the elements in your menu. If you want to prevent this you can enlarge the width of the nav or take a different approach.
Hope this helps.
I'm trying to get a label to line up with a div vertically. I think a picture describes what I'm trying to do; the way it's rendered is how it looks. The MS Paint-style corrections in blue are what I'd like it to be. I have included the HTML and CSS below and removed as much extraneous code as I can to get to just the problem.
How can I get that label to go to the top of the type options?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
/* <![CDATA[ */
/* from reset.css */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* from Application.css */
html {
min-height: 100%;
background-color: White;
color: Black;
}
body {
margin: 0;
margin-left: auto;
margin-right: auto;
color: #383838;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 0.8em;
background-color: transparent;
}
input, textarea, select {
font-family: inherit;
font-size: inherit
}
div#EverythingDiv {
width: 960px;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
div.MainContent {
margin: 0px auto 0px auto;
padding: 0;
min-height: 425px;
text-align: left;
clear: both;
}
/* from MyPage.css */
div.MainContent div.BasicInformationField {
}
div.MainContent div.BasicInformationField label {
display: inline-block;
width: 155px;
vertical-align: baseline;
}
div.MainContent div.BasicInformationField label.RadioLabel {
display: block;
font-weight: normal;
width: auto;
}
div.MainContent div.BasicInformationField textarea {
vertical-align: baseline;
font-family: inherit;
font-size: inherit;
}
div.MainContent div.BasicInformationField textarea#AddressTextArea {
height: 3.3em;
width: 250px;
}
div.MainContent div.BasicInformationField div#TypeOptionsDiv {
height: 3.3em;
width: 250px;
vertical-align: baseline;
font-family: inherit;
font-size: inherit;
display: inline-block;
}
div.MainContent div.BasicInformationField input.WebSite {
width: 250px;
}
/* ]]> */
</style>
</head>
<body>
<div id="EverythingDiv">
<h1 id="PageTitleH1">Title</h1>
<div class="MainContent">
<!-- view -->
<form action="MyPage" method="post">
<div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
<h2>Basic Information</h2>
<div class="BasicInformationField">
<label for="WebSiteTextBox">Web Site:</label> <input type="text" id="WebSiteTextBox" class="WebSite"/>
</div>
<div class="BasicInformationField">
<label for="AddressTextArea">Address:</label> <textarea id="AddressTextArea"></textarea>
</div>
<div class="BasicInformationField">
<label for="PhoneNumberTextBox">Phone Number:</label> <input type="text" id="PhoneNumberTextBox" class="WebSite"/>
</div>
<div class="BasicInformationField">
<label>Type:</label>
<div id="TypeOptionsDiv">
<label class="RadioLabel"><input type="radio" name="Type"/>Type 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 2 - Curabitur non odio hendrerit, hendrerit ante quis, rhoncus neque. Nam ac nisi non lorem accumsan dictum. </label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 3 - Morbi volutpat at eros ut dictum. Nam non arcu ornare, sodales eros nec, semper ante. Nunc tempor augue a est eleifend suscipit. Nam vel ornare leo.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 4 - Nam vel ornare leo.</label>
</div>
</div></form>
<!-- weiv -->
<div class="Clear"></div>
</div>
</div>
</body>
</html>
You can change this:
div.MainContent div.BasicInformationField label {
vertical-align: baseline;
}
To this:
div.MainContent div.BasicInformationField label {
vertical-align: top;
}
So I ended up doing this by floating everything left, having the labels clear both, and adjusting the margins so the baselines matched. Thanks for the conversation and the links.
jsfiddle.net/6Zjqh/
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
/* <![CDATA[ */
/* from reset.css */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* from Application.css */
html {
min-height: 100%;
background-color: White;
color: Black;
}
body {
margin: 0;
margin-left: auto;
margin-right: auto;
color: #383838;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 0.8em;
background-color: transparent;
}
input, textarea, select {
font-family: inherit;
font-size: inherit
}
div#EverythingDiv {
width: 960px;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
div.MainContent {
margin: 0px auto 0px auto;
padding: 0;
min-height: 425px;
text-align: left;
clear: both;
}
/* from MyPage.css */
fieldset > label {
float: left;
display: block;
width: 150px;
clear: both;
margin-top: 5px;
}
fieldset > input[type=text] {
float: left;
margin-top: 1px;
}
fieldset > textarea {
float: left;
}
fieldset > div.Group {
float: left;
width: 300px;
padding-top: 5px;
}
fieldset > div.Group input[type=radio] {
/*margin: 0;
vertical-align: top;
padding: 0;*/
margin-top: -3px;
vertical-align: middle;
}
fieldset > div.Group > label {
display: block;
margin-bottom: 3px;
line-height: 1.2em;
}
/* ]]> */
</style>
</head>
<body>
<div id="EverythingDiv">
<h1 id="PageTitleH1">Title</h1>
<div class="MainContent">
<!-- view -->
<form action="MyPage" method="post">
<div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
<fieldset>
<legend>Basic Information</legend>
<label for="WebSiteTextBox">Web Site:</label>
<input type="text" id="WebSiteTextBox" value="http://www.google.com/" />
<label for="AddressTextArea">Address:</label>
<textarea id="AddressTextArea" style="float: left; width: 350px; height: 4.4em;">Sample Address</textarea>
<label>Type</label>
<div class="Group">
<label class="RadioLabel"><input type="radio" name="Type"/>Type 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 2 - Curabitur non odio hendrerit, hendrerit ante quis, rhoncus neque. Nam ac nisi non lorem accumsan dictum. </label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 3 - Morbi volutpat at eros ut dictum. Nam non arcu ornare, sodales eros nec, semper ante. Nunc tempor augue a est eleifend suscipit. Nam vel ornare leo.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 4 - Nam vel ornare leo.</label>
</div>
</fieldset>
</form>
<!-- weiv -->
<div class="Clear"></div>
</div>
</div>
</body>
</html>