I've created a container <div id="container"> for my content, which in return has a simple <div id="leftbar"> and <div id="content"> for the main text of the page.
I've made the <div id="container"> as a display:table in styles, and both <div id="leftbar"> and <div id="content"> as display:table-cell.
The problem I'm having now is, whenever I try to change padding on the <div id="content">, it affects padding in <div id="leftbar"> for some reason. And it applies only for the top padding.
How can I resolve this, and better yet, why is this happening? Is it because of the table structure?
Providing with code, and jsfiddle. In jsfiddle change the last padding line in CSS to see how it shifts everything in the left bar.
HTML:
<body>
<div id="wrapper">
<div id="header"><img src="http://i.imgur.com/krQBHIx.jpg" width="690" height="100"/></div>
<div id="container">
<div id="leftbar">
<ul>
<p class="heading">Navigation</p>
<li>Main</li>
<li>Articles</li>
<li>Lessons</li>
<li>About</li>
</ul>
<p class="heading" style="background: #bb0;">Subscribe</p>
<form action="subscribe.php" method="POST" name="form1">
Subscribe to our RSS feed and get all the fresh news and articles directly in your mail box!<br /><br />
<label><p>Enter your name:</p><input type="text"/></label>
<label><p>Enter your e-mail:</p><input type="text"/></label>
<input type="submit" name="submit" value="Send!"/>
</form>
</div>
<div id="content">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</div>
</div>
<div id="footer"><img src="http://i.imgur.com/2GzQuoo.jpg" width="690" height="18"/></div>
</div>
</body>
CSS:
/* Styles */
*
{
padding: 0;
margin: 0;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
font: 14px Verdana, Tahoma, sans-serif;
}
*:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
a
{
color: #000;
text-decoration: none;
}
body
{
background: #606B79;
}
p
{
font: 14px Tahoma, Verdana, sans-serif;
}
#wrapper
{
width: 690px;
margin: 10px auto;
}
#header img
{
display: block;
height: 100%;
}
#footer img
{
border: 1px solid black;
border-top: none;
display: block;
}
#container
{
display: table;
width: 100%;
border-left: 1px solid black;
border-right: 1px solid black;
background: #fff;
}
#leftbar
{
display: table-cell;
width: 184px;
border-right: 2px solid black;
height: 100px;
padding: 5px;
}
#leftbar ul
{
list-style: none;
margin-bottom: 15px;
}
.heading
{
text-align: center;
background-color: #a22;
color: #fff;
padding: 3px;
margin-bottom: 7px;
}
#leftbar ul li
{
border: 1px solid gray;
border-bottom: none;
}
#leftbar ul li:last-child
{
border: 1px solid gray;
}
#leftbar a
{
display: block;
padding: 2px 4px;
}
#leftbar a:hover
{
background: #ccc;
}
#leftbar form
{
border: 1px solid gray;
padding: 10px;
text-align: justify;
}
#leftbar form input
{
width: 149px;
margin: 3px 0;
}
#leftbar form input[type="submit"]
{
height: 25px;
background: #ccc;
margin-top: 20px;
}
#content
{
display: table-cell;
width: 506px;
text-align: justify;
padding: 25px;
}
jsfiddle: http://jsfiddle.net/9Qtpj/
Help me, please?
The content in your #leftbar div is aligned to the baseline. To fix your current html/css change the following:
#leftbar
{
vertical-align: top;
display: table-cell;
width: 184px;
border-right: 2px solid black;
height: 100px;
padding: 5px;
}
BUT! You really should be using another method for this. Displaying non-table elements as tables can have its issues, and isn't needed anymore.
Start learning about flexbox [the latest and greatest in web layout] - http://css-tricks.com/snippets/css/a-guide-to-flexbox/ and use floats as a fallback [see #AlexPrinceton's answer].
Try to change your CSS styles. Don use display:table for aligning elements if you can use "float"
Here is your code
CSS
#container {
width:100%;
overflow:hidden
}
#content {
float:right;
width:506px;
padding:25px;
}
#leftbar {
width:184px;
float:left;
padding:5px;
}
Related
It was probably asked before / someone had a similar problem, but I have been searching for a long time and couldn't find any solution to my problem.
I have a div called loginBox that is centred, and has a form in it. I want the text boxes in the form to take almost the entire width of the form (It should look like google's new sign in form).
I am setting the input's margin to auto and the width to 90% using css, but for some reason it has no effect. Even when I set the width to a number (i.e 200px), the width remains unchanged.
The only way I could make it work is increase the padding of the input to 100px, but this is both not responsive, and not a good practice.
This is the code I am using:
body {
margin: 0;
background-color: #EEEEEE
}
.menu {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
}
.pageMain {
width: 100%;
padding: 16px;
margin-top: 70px;
height=1500px;
}
.loginBox {
display: table;
margin: auto;
width: 50%;
background-color: white;
box-shadow: 2px 2px lightgrey;
padding: 25px;
}
input {
margin: auto;
width=90%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<div class="menu">
<a class="active" href="index.html">Home</a>
Grades
Behavior
Homework
Learning Enviroments
Time Table
People
<a style="float: right" href="contact.html">Contact</a>
<a style="float:right" href="contact.html">Login</a>
</div>
<div class="pageMain">
<div class="loginBox">
<h3>Sign in</h3>
<h4>With your RSIS account</h4>
<form>
<input type="text" size="300" name="username" value="Email, RSIS username or id">
</form>
</div>
</div>
Screenshot of what I get right now
Fix your width. Instead of = it should be :. Your code seems fine otherwise. And width: 100% works just the way you intended.
Also, as mentioned in the comments, It should be height: 1500px; in .pageMain
body {
margin: 0;
background-color: #EEEEEE
}
.menu {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
}
.pageMain {
width: 100%;
padding: 16px;
margin-top: 70px;
height: 1500px;
}
.loginBox {
display: table;
margin: auto;
width: 50%;
background-color: white;
box-shadow: 2px 2px lightgrey;
padding: 25px;
}
input {
margin: auto;
width:100%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<div class="menu">
<a class="active" href="index.html">Home</a>
Grades
Behavior
Homework
Learning Enviroments
Time Table
People
<a style="float: right" href="contact.html">Contact</a>
<a style="float:right" href="contact.html">Login</a>
</div>
<div class="pageMain">
<div class="loginBox">
<h3>Sign in</h3>
<h4>With your RSIS account</h4>
<form>
<input type="text" size="300" name="username" value="Email, RSIS username or id">
</form>
</div>
</div>
the first look into your css file
height=1500px; // Why =, not :? <----- PageMain class
width=90%; // <---- same here in input class
change:
width=90%;
height=1500px;
to:
width:90%;
height:1500px;
also use * { box-sizing: border-box;} for remove scrollbars.
I have a advertisement as given in below given jsfiddle.
jsfiddle
HTML
<div class='pc_singleblock'>
<div style='box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; text-align:center; font-size: 11px; font-family:helvetica; font-weight: bold; width:300px; height:250px; background:#E7E7E7; color:#666; line-height:250px;position:relative;'
class='pc_block_active'>
<a target='_blank' href='//cdn.adclerks.com/core/adclick/3485/3329' alt='Followlike' title='Followlike' style='width: 300px; height: 250px;'><img width=300 height=250 src='//static.adclerks.com/ads/3485.jpg' /></a>
<div class="tag">Adtext</div>
</div>
</div>
CSS
<style type='text/css'>.pc_block a {
color: #666!important;
margin: 0;
padding: 0;
}
.pc_block a:hover {
color: #222!important;
}
.pc_block {
margin: 0;
}
.pc_block:hover {
margin: 0;
background: #ddd;
text-decoration: underline !important;
}
.pc_block_inactive {
border: 1px solid #BBB;
}
.pc_block_inactive:hover {
border: 1px solid #999;
}
</style>
I want to show adtext on this advertisement as show on demo ads on this page
Demo ads in the bottom right corner. which initially show any symbol and change to link on hover as shown on this demo page. How to do this? Thanks in advance.
You can position your link
.pc_block_active {position: relative;}
.tag {
position: absolute;
bottom: 0;
right: 0;
}
Hope this work
How can I have a child div appear when I hover on the parent div? Please view.Fiddle My apologies if my code is incorrect.
Thank you
I know you have not mentioned jQuery as your tag but here is a solution which does the trick.
If you can use jQuery then I suggest you to use to achieve what you want because changing CSS property of one element when another element is hovered on is bit tricky and has many limitations,
Here is a simplified fiddle with jQuery
This is the jQuery script that you can add in your file,
$(document).ready(function(){
$("#a11").mouseover(function(){
$("#submenu11").show();
});
$("#a11").mouseout(function(){
$("#submenu11").hide();
});
});
One more thing, it is not advisable to have id that starts with number, in your case id="11" might have issues in some browsers, that's why I have substituted id=11 with id="a11"
If due to some reasons you don't want to use jQuery then I can give you an alternative approach using JavaScript
#submenu11 {
width:550px;
height:400px;
float:none;
padding-left:1px;
padding-top:1px;
margin-right; 10px;
font: 15px/30px sans-serif;
clear: left;
margin-left: 181px;
border: 1px solid blue;
border-bottom: 5px solid blue;
}
#left1, #right1 {
width: 35%;
float:left;
margin-top: -85px;
}
#left1 {
margin-right: 1px;
border: 1px solid green;
box-sizing: inline-block;
height: 100%;
}
#right1 {
display: inline-block;
box-sizing: border-box;
width: 60%;
height: 100%;
border: 1px solid red;
}
#abc_11 {
font: 15px/30px sans-serif;
height: 300px;
width:170px;
display: inline-block;
line-height:30px;
background-color:white;
float:left;
padding-right:10px;
border-right: 1px solid #0057A4;
clear:left;
}
submenulist ul li {
list-style-type: none;
clear: left;
margin-left: -40px ;
}
a.menu1 {
font: 15px/30px sans-serif;
height: 30px;
width: 170px;
display: inline-block;
line-height: 30px;
background-color: white;
float: left;
padding-left:20px;
border-right: 1px solid blue;
margin-left: -10px;
clear:left;
text-decoration: none;
color: black;
}
a.submenulink1 {
border-right: 0px solid #E1E1E1;
border-top: 0px solid #444;
color: black;
display: block;
text-align: left;
padding-left: 10px;
text-decoration: none;
width: 100%;
font: 15px/30px sans-serif;
height: 30px;
}
a.submenulink1:hover {
background: lime;
color: white;
}
.hide
{
display:none;
}
#abc_11:hover#abc_11 + #submenu11{
display:block;
}
<div>
<div id="abc_11">
<a class="menu1" href="#">GALAXY 11</a>
</div>
<div id="submenu11" class="hide">
<div id="left1">
<ul class="nav1">
<li class="submenulist"><a class="submenulink1" href="#">GALAXY S6 Edge</a></li>
<li class="submenulist"><a class="submenulink1" href="#">GALAXY S6</a></li>
<li class="submenulist"><a class="submenulink1" href="#">GALAXY S5</a></li>
<li class="submenulist"><a class="submenulink1" href="#">GALAXY S4 Mini</a></li>
<li class="submenulist"><a class="submenulink1" href="#">GALAXY S3 Mini VE</a></li>
</ul>
</div>
<div id="right1">
<img src="http://www.samsung.com/uk/next/img/estore-recommend- images/mobiles/S6edgegreen.jpg" alt=""></img>
GALAXY S6 Edge information
</div>
</div>
</div>
I guess there is some issue with id being a number.
For the sake of simplicity, you may want to look into a readymade menu solution like this one:
http://users.tpg.com.au/j_birch/plugins/superfish/examples/
The advantage is that you will get a crossbrowser compatible solution.
The problem that i am facing is that text inside the a tag is not adjusting on a single line.
Here's my html.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="homepage">
Set as Homepage
</div>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="70" style="font-size:20pt;"/>
</form>
<div id="pic_2">
<img src="powerd-by-google.png">
</div>
</div>
<div id="footer">
© 2012 - We Respect your Privacy - About AVG Secure Search
</div>
</div>
</body>
</html>
and here's my css.
body
{
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3
{
margin: 0;
padding: 0;
}
p,ul,ol,li
{
margin: 0;
padding: 0;
}
#outer
{
background-color: rgb(67,68,71);
}
#outer ul
{
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li
{
float: left;
}
.current
{
background-color: rgb(56,63,137);
}
#outer a
{
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover
{
color: black;
background-color: white;
}
#outer .current a:hover
{
color: white;
background-color: inherit;
}
#homepage a
{
float: right;
font-weight: none;
color: white;
background-color: rgb(67,68,71);
display: inline;
text-transform: lowercase;
border-right: none;
}
#homepage a:hover
{
color: white;
background-color: inherit;
}
#clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin: 0 auto;
overflow: auto;
}
#pic
{
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content
{
position: absolute;
top: 60px;
left: 90px;
}
#forms
{
margin-top: 50px;
position: relative;
}
#pic_2
{
position: absolute;
top: 0px;
left: 867px;
}
#footer
{
width: 500px;
margin: 375px auto 0px;
}
#footer a
{
text-decoration: none;
}
now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.
Any suggestions in this matter would be really helpful.
thank you.
I'm assuming you're talking about the 'set as homepage' button.
If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.
You can fix this by simply adding the css style width: inherit; to #homepage a
Example:
http://jsfiddle.net/2jByx/1/
You need to add width to the "set as homepage" element
#homepage a {
.....
width: 120px; //added width
}
Take a look at here, http://jsfiddle.net/VkmHr/
is that you looking for?
Problem:
https://postimg.cc/image/tunhwh8qj/
The trouble I am currently having is that the border around my body is not outlining everything. As I have recently learned I'm guessing this means an element is out of the flow due to floating? However I am not certain how to fix it in this case.
My html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links">Home</li>
<li class="links">Location</li>
<li class="links">Facilities</li>
<li class="links">Attractions</li>
<li id = "endlink">Bookings</li>
</ul>
<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS is:
html{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
height: 100%;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
height: 100%;
}
#leftcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-right: 1px solid #7f7f7f;
height: 100%;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
#lastlink:hover{
background-color: #999999;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
padding: 0px;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
thanks in advance guys!!
This is happening because your body has fix height of 100%.Change body tag css as:
height:auto;
min-height: 100%
if this doesn't work then add following with this:
overflow:auto;
Probably better NOT to use the body element for your container. Instead, just add
<div class="container"></div>
around your code and in your CSS changehtml to body and body to div.container.
body{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
div.container{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
}
Edit: I completely missed the 100%, that's gotta be it.
Add overflow: hidden to your body element. When elements are floated it will not push the parent container height past it unless there is a clearer