After looking on stackoverflow for really long i could not find an answer to my question, so that's why i am asking it instead!
There's a strange white part between my navigation bar and main container, which i tested by just typing a under the bar
This is my code:
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: gray;
}
#wrapper {
margin: 32px 160px 0 160px;
background-color: white;
height: 90%;
}
#nav {
background-color: #48D1CC;
margin: 0;
padding: 0;
}
#nav ul li {
margin: -7px 4px 1px 0;
background-color: #48D1CC;
width: 19.5%;
height: 42px;
display: inline-block;
text-decoration: none;
text-align: center;
color: black;
}
#nav a {
line-height: 42px;
font-family: arial, serif;
font-size: 20px;
}
#nav ul li:hover {
background-color: #40E0D0;
}
#right {
margin: 0;
width: 15%;
height: 10px;
color: black;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home</li>
<li>Help</li>
<li>Contact</li>
<li>Forum</li>
<li>Info</li>
</ul>
</div>
a
<noscript>Please enable JavaScript, you have it disabled</noscript>
</div>
</body>
</html>
I am not sure why this happens, so some help would be great to have.
Your ul has a 16px bottom margin
#nav ul {
margin-bottom: 16px;
}
NOTE the next time you face a similar problem try using Chrome Dev Tools (prssing f12) or FireBug to analyze the elements with an unexpected behaviour
Your <ul> tag is adding padding by default. Override it by adding:
ul{
margin-bottom: -1px;
}
I'm making a wordpress template from scratch.
I've eliminated many of the files and kept in just the header.php, footer.php, index.php, and style.css to rule out many of my potential problems.
I've played with the code, looked up questions, googled for my solution, but I'm not sure why my style isn't being recognized when i go to my site
the following are my 4 files:
style.css
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}
/* MAIN STYLE */
html {
font-size: 20px;
}
body {
}
#bodywrapper {
background: gray;
font-family: arial, sans-serif;
font-size: 5em;
}
header {
height:20em;
background: #000;
color: #fff;
margin: 0 auto;
}
#nav {
}
#nav ul {
list-style-type: none;
}
#nav ul li {
display: inline-block;
padding: 1em;
}
#nav ul li a{
padding: 1em;
text-align: center;
text-decoration:none;
}
#nav ul li a div{
height: 5em;
width: auto;
padding: 1em;
background-color: black;
}
#sandwichwrapper {
margin: 2em;
border: 1em solid black;
}
#sidebar {
float: right;
width: 15em;
margin: 2em;
border: 1em solid green;
}
#main {
float: right;
width: 15em;
margin: 2em;
border: 1em solid blue;
}
#comments{
clear: both;
margin: 2em;
border: 1em solid yellow;
}
#comment-form{
}
footer {
clear: both;
margin: 0 auto;
padding: 1em;
background: #000;
color: #fff;
}
/* BUNDLED STYLES */
header, footer{
width:100%;
margin:0 auto;
padding: 5em;
overflow:auto;
}
nav #sandwich {
width: 50em;
}
/* TEXT RULES */
h1 {
size: 10em;
color: green;
}
h2 {
size: 8em;
}
h3 {
size: 6em;
}
h4 {
size: 4em;
}
h5 {
size: 2em;
}
header.php
<!doctype html>
<html>
<head>
<title>The Logic Spot</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
header("Content-type: text/css");
</head>
<body>
<div id="bodywrapper">
<header>
<h1><?php bloginfo('name')?></h1>
</header>
<div id="nav">
<?php wp_nav_menu();?>
</div>
<div id="sandwichwrapper">
index.php
<?php get_header()?>
<!--div#bodywrapper contained in header.php-->
<!--div#sandwich contained in header.php-->
<?php get_sidebar()?>
<div id="main">
<?php while(have_posts()): the_post()?>
<h2><?php the_title()?></h2>
<p>By <?php echo get_the_author_link();?></p>
<?php the_content(__('Continue Reading'))?>
<?php endwhile?>
</div>
<!--div#sandwich contained in footer.php-->
<!--div#bodywrapper contained in header.php-->
<?php get_footer()?>
footer.php
</div> <!-- close div#sandwichwrapper-->
<footer>
<?=date('Y')?> Copyright
</footer>
</div> <!-- close div#bodywrapper-->
</body>
</html>
Add this line in the <head> tag
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Hey you need to specify absolute path to the stylesheets, for example
<link type="text/css" rel="stylesheet" href="http://www.yourwebsite.com/wp-content/themes/yourtheme/style.css" />
Also as Matt stated, you can use functions like get_stylesheet_directory_url() or get_stylesheet_uri() to make your path more dynamic.
I have a div, like this:
<div id="div1" name="div1" style="display:none;">
hello world
</div>
Thats on the bottom of my page. Now, when putting the mouse on an image, I want to show that div below the image. The problem is, I have 10 images next to each other and the div should be displayed below each of them dynamically, meaning putting the mouse on image 6 should display the div below image 6.
How can I do that?
Thanks!
This could be an approach if you want to use jQuery and want to move the div inside your DOM:
$(function() {
var div1 = $('#div1').remove();
$('img')
.bind('mouseenter', function() {
$(this).parent().append(div1);
})
.bind('mouseleave', function() {
div1.remove();
});
});
This can be accomplished by only CSS here is an working example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* { margin: 0; padding: 0; }
body { font: 12px Helvetica, Sans-Serif; }
img {width: 125px;}
#page-wrap { width: 125px; margin: 62px auto; }
h1 { font-size: 30px; letter-spacing: -1px; margin: 0 0 20px 0; }
.people { position: relative; width: 125px;}
a { text-decoration: none; color: #222; display: block; outline: none; padding: 5px; }
a img { border: 1px solid #ccc; }
a .name { font: 12px Georgia, Serif; width: 125px; display: none;}
a:hover .name { color: #900; font-weight: bold; position: relative; display: block;}
a:hover img { border: 1px solid #000; margin: 0px; }
a .photo { display: block; position: absolute; width: 125px; height: 125px; }
#toby .photo { top: 0; left: 0; position: relative;}
</style>
</head>
<body>
<div id="page-wrap">
<div class="people">
<a href="#toby" id="toby">
<div class="photo">
<img src="http://www.style-makeover-hq.com/images/what-is-my-face-shape-and-what-is-the-best-haircut-for-it-21276689.jpg" alt="Toby Pic" />
</div>
<div class="name">Toby Yong<br />
Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table.
</div>
</a>
</div>
</div>
</body>
</html>
Here is jsfiddle of it: http://jsfiddle.net/Ek4Ej/
Code is based on this article: http://css-tricks.com/remote-linking/
you can easily add more images with this effect on page or apply any style to it.
try this DEMO
$(function() {
$("#main").on("hover",".img img", function(){
pos = $(this).offset();
$(".box").css({"left":pos.left,"top":(pos.top + $(this).height())});
$(".box").show();
});
});
I faced the problem with white-space: pre-line in my layout. When I wrap content in a div element it works just fine, but when I replace div with table text is no longer wrapping. This is only small part just to show the case. In original code it would be hard to replace this outer table. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
border: 1px dashed red;
font-size: 12px;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
margin: 0 auto !important;
padding: 10px;
width: 600px;
}
.document-preview {
border-spacing: 0;
width: 100%;
}
.document-preview .content-details-row {
padding: 0 2px 0 162px;
position: relative;
white-space: nowrap;
z-index: 1;
}
.document-preview .content-details-row span:first-child {
display: block;
float: left;
margin: 0 2px 0 -160px;
overflow: hidden;
width: 160px;
z-index: 2;
}
.document-preview .content-details-row span:first-child:after {
content: "..............................................................................";
font-weight: lighter;
font-size: 10px;
letter-spacing: 2px;
}
.document-preview .content-details-row .content-details-value {
display: inline-block;
width: 100%;
z-index: 2;
}
.document-preview .content-details-row .content-details-value > div {
white-space: pre-line;
word-wrap: break-word;
}
</style>
</head>
<body>
<table class="document-preview"><tbody><tr><td>
<div class="content-details-row">
<span>Label:</span>
<span class="content-details-value">
<div>Doesn't work: Something something AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
</span>
</div>
</td></tr></tbody></table>
<hr />
<div class="document-preview">
<div class="content-details-row">
<span>Label:</span>
<span class="content-details-value">
<div>Works: Something something AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
</span>
</div>
</div>
</body>
</html>
Working sample: http://jsfiddle.net/UPXzt/1/
Thanks in advance.
add this style to your page
table {
table-layout: fixed;
}
sample:
http://jsfiddle.net/UPXzt/10/
Try this demo
just add width to the div
.document-preview .content-details-row .content-details-value > div
{
width: 430px;
white-space: pre-wrap !important;
word-wrap: break-word;
}
I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the DIV named body to fill the available space after making room for the header and thus anchoring the footer to the bottom of the browser window. However, what I'm getting right now is three panels just stacked on top of each other.
I would like a solution that would work if the browser supported HTML5 and one if it didn't
Please note I've inlined comments in the CSS to try and explain what I've tried.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("Title", "Index", "Home")</p>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - ACME. All rights reserved.</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#RenderSection("scripts", required: false)
</body>
</html>
CSS
body {
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF THE BODY ITSELF WOULD SPAN */
/* WITH NO OTHER CSS APPLIED TO THE body ELEMENT */
/*height: fill-available;*/
/*height: 100%*/
}
/* general layout
----------------------------------------------------------*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF I COULD GET THIS ELEMENT TO SPAN */
/* WITHOUT ANY OTHER CSS APPLIED TO THE body TAG */
/*height: fill-available;*/
/*height: 100%*/
}
.main-content {
/*background: url("../Images/accent.png") no-repeat;*/
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
/*background: url("../Images/heroAccent.png") no-repeat;*/
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 20px 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* social
----------------------------------------------------------*/
ul#social li {
display: inline;
list-style: none;
}
ul#social li a {
color: #999;
text-decoration: none;
}
a.facebook, a.twitter {
display: block;
float: left;
height: 24px;
padding-left: 17px;
text-indent: -9999px;
width: 16px;
}
a.facebook {
background: url("../Images/facebook.png") no-repeat;
}
a.twitter {
background: url("../Images/twitter.png") no-repeat;
}
Just snap the header and footer at the bottom of the page using fixed positioning.
header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }
Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.
div#body{ background:none; }
body{ background:#eee; }
This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.
header, footer{ background:#fff; }
By the way I would suggest removing body margins. body{ margin:0; }
I believe it's a bit impossible to do that with just CSS. You can make a webpage with 100% height like this:
html{
height: 100%;
}
body{
height: 100%;
}
#body{
height: 100%;
}
And then for header, body and footer you can do like this:
header{
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: #f00;
}
#body{
bottom: 100px;
left: 0;
position: absolute;
right: 0;
top: 100px;
background-color: #fff;
}
footer{
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
background-color: #ff0;
}
It might work for a bit, but it'll break at some point. When you resize your browser, it'll be running out of room for your #body. If you want a better solution, you should use javascript. In your javascript, calculate how much space you have for your #body, then either adjust the height of header and footer. Or adjust the #body instead.