I am failing miserably at getting my layout to behave properly with a two column-div layout
There is a content wrapper, then a navigation menu on the left and main content on the right.
For some reason the main content is centering based on the content-wrapper, and not on its own width. I'm not sure how to get the main-content to center within itself.
HTML:
<body>
<div id="wrapper">
<!-- #BeginLibraryItem "/Library/header.lbi" -->
<div id="header"></div>
<!-- END HEADER -->
<!-- #EndLibraryItem -->
<div class="clear"></div>
<div id="content-wrapper">
<!-- #BeginLibraryItem "/Library/navigation.lbi" -->
<div id="navigation">
<p class="Home-Page-L_Panel"><img src="http://twitter-badges.s3.amazonaws.com/follow_bird_us-b.png" alt="Follow kosherCruises on Twitter"></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Passover10">Passover</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#KCruises">Kosher Cruises</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Sukkot">Sukkot</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#GKTours">Kosher Tours</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#JHTours">Heritage Tours</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="links/Interesting-Links.htm">Links</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="Contact.htm">Contact Us</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="index.htm">Home</a></p>
<p class="Home-Page-L_Panel"><a class="Home-Page-L_Panel" href="#Candle">Candle Lighting</a></p>
<div><img src="OTBGifs/el_al_whitebkgrd-100W.jpg" alt="El Al It's not just an airline. It's Israel." width="100" height="24" border="0"></div>
<div align="left"><img src="Travelex_Images/Linking Graphic_small.GIF" alt="Travelex Insurance" width="100" height="66" border="0"></div>
<p>Time in Jerusalem</p>
<div align="left">
<iframe src="http://free.timeanddate.com/clock/i1q3n65d/n676/fn5/tcddd/ahl/bas5/bat6/baceee/pa2" frameborder="0" width="103" height="33"></iframe>
</div>
<div><img src="http://www.judaicawebstore.com/AffiliatePro/scripts/imp.php?a_aid=5547af81c16e2&a_bid=3d5614ac" width="1" height="1" alt="" /></div>
<object width="120" height="600">
<param name="movie" value="http://www.judaicawebstore.com/AffiliatePro/accounts/default1/banners/JWS_120x600-3.swf?clickTAG=http%3A%2F%2Fwww.judaicawebstore.com%2Fgifts-for-someone-you-love-C906.aspx%23a_aid%3D5547af81c16e2%26a_bid%3D3d5614ac">
<param name="menu" value="false"/>
<param name="quality" value="medium"/>
<param name="wmode" value="Opaque"/>
<embed src="http://www.judaicawebstore.com/AffiliatePro/accounts/default1/banners/JWS_120x600-3.swf?clickTAG=http%3A%2F%2Fwww.judaicawebstore.com%2Fgifts-for-someone-you-love-C906.aspx%23a_aid%3D5547af81c16e2%26a_bid%3D3d5614ac" width="120" height="600" loop="false" menu="false" swliveconnect="FALSE" wmode="Opaque" allowscriptaccess="always">
</object>
</div>
<!-- END NAVIGATION -->
<!-- #EndLibraryItem -->
<div id="main-content">
<h1>The Site for Kosher Travel</h1>
</div><!-- END MAIN-CONTENT -->
</div><!-- END CONTENT-WRAPPER -->
<!-- <div class="clear"></div> -->
<div id="footer">
</div><!-- END FOOTER -->
</div><!-- END WRAPPER -->
</body>
STYLES:
/* CSS Document */
body {
background-image:url(OTBGifs/116a8b.GIF);
}
/* unvisited link */
a:link {
color: #000099;
}
/* visited link */
a:visited {
color: #000099;
}
/* mouse over link */
a:hover {
}
/* selected link */
a:active {
color: #0000FF;
}
h1, h2, h3, h4, h5, h6, p
{
font-family: Times New Roman, Times, serif;
}
h1 {
font-size: 20px;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
}
p {
font-size: 16px;
}
#wrapper {
width: 740px;
margin-left: auto;
margin-right: auto;
background-color:#848484;
}
#navigation {
width: 132px;
display: inline-block;
margin-top: 0px;
vertical-align: top;
background-color: #ffffff;
}
.clear {
clear: both;
margin:0px;
}
.Home-Page-L_Panel
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-weight: bold;
font-style: italic;
}
a.Home-Page-L_Panel
{
text-decoration: none;
}
#header {
width: 100%;
height: 113px;
background-color: #6699FF;
}
#main-content {
vertical-align: top;
margin-left: 132px;
display: inline-block;
}
#content-wrapper {
margin-top: 0px;
}
Any help would be appreciated.
Image of current layout showing how the "The Site for Kosher Travel" is not properly centered within its div:
I would suggest using text-align: center within the #main-content. I only see it within your h1.
I'm assuming you want the left nav to use 132pixels in width, and the main-content nav to use the remaining screen width. You need to float your nav container to the left, then for the main-content div, set it to display: block and give it left-margin equal to the width of the left nav:
#navigation {
width: 132px;
display: inline-block;
margin-top: 0px;
vertical-align: top;
float: left; <----------- here
}
#main-content {
vertical-align: top;
display: block; <------- here
margin-left: 132px <------- and here, increase this to add space between the two columns
}
To ensure that any content after #content-wrapper renders beneath the whole thing, add a clearfix to your CSS:
#content-wrapper:after {
content: "";
display: block;
clear: both;
}
Example:
https://jsfiddle.net/bcoom7rn/1/
I see your full code and see that you have few fundamental issue with the way you have written your layout.
Things you can do:
Use width for #main-content
Use float layout
1 Update CSS for #main-content
#main-content {
vertical-align: top;
display: inline-block;
width:604px;
}
Notice, I have removed margin-left. See here: http://jsfiddle.net/tg68m6mp/
2 Use floats layout. (Good, old way)
Use float on both #navigation and #main-content, also give width and use clearfix div which you already have. See here: http://jsfiddle.net/56bnk5s4/
try this....
#main-content { width: calc(100% - 136px);margin-left: auto; };
h1 { text-align: center; } /* this h1 is inside main-content div*/
Actually, h1 is NOT centering based on the #content-wrapper. It just happens that your container size made it SEEM like it's in the center of the #content-wrapper.
Apply these styles to #main-content:
right: 132px;
left: 0;
top: 0;
bottom: 0;
position: absolute;
Apply these styles to #content-wrapper:
position: relative;
Remove these styles from #main-content:
margin-left: 132px;
Hope that helps!
Related
im putting images on the screen (just little circles) and every time I press a button 10 more pop up. This is what is happening:
It goes underneath the previous one.
This is what I want to happen:
my CSS thus far:
.numbers {
position: relative;
margin-top: 20px;
padding: 0;
}
.num p {
color: #877000;
position: absolute;
margin: 0 auto;
font-size: 16.5px;
margin-top: 5px;
margin-right: 6px;
margin-left: 6px;
float: left;
font: "SourceSansProBlack",Arial,sans-serif;
font-weight: bold;
}
.numbers num img {
position: relative;
}
.userNumbers {
position: relative;
}
the HTML:
<div class="userNumbers">
<div class="numbers">
<div class="num"> <p> 1 </p><img src="pic.png"></div>
<!--to 10-->
</div>
</div>
How, using CSS, can I change it to go next to each other? The images are inside a div with a class. :)
basically every time the div 'numbers' is called I want to add 32px the the left of it.. not go under it. Im calling it with JavaScript btw, but that is unrelated.
I'd put the 10 first images inside a div with a property:
display: inline-block;
Then just duplicate the div with the images and it should fine.
For example,
<div style="display: inline-block;">
<img id="img1" />
...
<img id="img10" />
</div>
<div style="display: inline-block;">
<img id="img11" />
...
<img id="img20" />
</div>
I would choose this kind of approach with display flex to dinamically add new columns. Remember that <p> height should be 1/10 of #imgContainer if you want to show 10 images per column. For instance, if you want to show 20 images per column, set parent height to 1000px or <p> height to 25px
#imgContainer {
max-height: 500px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
#imgContainer p {
position: relative;
margin: 0;
width: 50px;
height: 50px;
}
#imgContainer img {
width: 100%;
height: 100%;
}
#imgContainer span {
color: #877000;
line-height: 50px;
font-size: 16.5px;
font: "SourceSansProBlack",Arial,sans-serif;
font-weight: bold;
position: absolute;
text-align: center;
width: 100%;
left: 0;
}
<div id="imgContainer">
<p><img src="http://goo.gl/L72CdX"><span>1</span></p>
<p><img src="http://goo.gl/L72CdX"><span>2</span></p>
<p><img src="http://goo.gl/L72CdX"><span>3</span></p>
<p><img src="http://goo.gl/L72CdX"><span>4</span></p>
<p><img src="http://goo.gl/L72CdX"><span>5</span></p>
<p><img src="http://goo.gl/L72CdX"><span>6</span></p>
<p><img src="http://goo.gl/L72CdX"><span>7</span></p>
<p><img src="http://goo.gl/L72CdX"><span>8</span></p>
<p><img src="http://goo.gl/L72CdX"><span>9</span></p>
<p><img src="http://goo.gl/L72CdX"><span>10</span></p>
<p><img src="http://goo.gl/L72CdX"><span>11</span></p>
<p><img src="http://goo.gl/L72CdX"><span>12</span></p>
<p><img src="http://goo.gl/L72CdX"><span>13</span></p>
</div>
What's the best way to align my arrow graphic in the middle and also touching the bottom of the bar above?
Right now it's aligned to the left and there is space between the top bar and the arrow.
See my jsfiddle: http://jsfiddle.net/huskydawgs/Z7dZR/26/
Here's my HTML
<!-- Start Form -->
<div class="wrapper-twocol">
<div class="twocol_row">
<div class="twocol_cell1">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
<div class="twocol_cell2">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
</div>
<!-- End Form -->
Here's my CSS:
/* 2 Column */
.wrapper-twocol {
position:relative;
width:100%;
border: none;
margin: 20px 0 37px 0;
}
.twocol_row {
height:100%;
white-space:nowrap;
}
.twocol_cell1, .twocol_cell2 {
height:100%;
width:47%;
display:inline-block;
white-space:normal;
vertical-align: top;
margin-left: 6%;
}
.twocol_cell1{
margin-left: 0;
}
.form-header {
background:#939598;
margin:0;
padding: 10px 0 10px 0;
color: #fff;
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
font-size: 21px;
text-align: center;
}
.form-arrow {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
Change you styling slightly. Your div is the entire width of it's parent so you just need to center align that divs contents.
DEMO http://jsfiddle.net/Z7dZR/27/
.form-arrow {
margin: 0 auto;
text-align: center;
margin-top: -2px;
}
I'd suggest the following solution.
First, wrap arrows within a wrapper-div:
<div class="wrapper arrowWrapper">
<div class="form-arrow">
<img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12">
</div>
</div>
Second, apply following CSS:
.arrowWrapper {
width:209px; /*It's the width of the buttons calculated by the developer tools*/
}
.form-arrow {
margin:-3px auto 0 auto;
width:11px; /*width of the arrow*/
}
You can do it with css only (removing the arrow image and its wrappers from the markup)
using the ::after selector. That's how you will prevent repeating of the tag and the wrappers.
.form-header::after{
content: url('https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif');
position: absolute;
left: 50%;
bottom:-18px;
}
Here is the Demo: http://jsfiddle.net/7H5ea/1/
i have 4 social media buttons in a div and i want to space them equally but i can't figure out how to?
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<img src="Images/facebooksmall.png" />
<img src="Images/twittersmall.png" />
<img src="Images/googlesmall.png" />
<img src="Images/linkedinsmall.png" />
</div>
</div>
</div>
I would place a div around the images and place the height of the divs to 25%.
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<div class="social_btn">
<img src="Images/facebooksmall.png"/>
</div>
<div class="social_btn">
<img src="Images/twittersmall.png"/>
</div>
<div class="social_btn">
<img src="Images/googlesmall.png"/>
</div>
<div class="social_btn">
<img src="Images/linkedinsmall.png"/>
</div>
</div>
</div>
</div>
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
.social_btn {
height: 25%;
}
If your container div is a fixed width here's what I usually do, assuming 48x48 icons:
HTML
<div id="social">
<img id="twitter" />
<img id="facebook" />
<img id="linkedin" />
</div>
CSS
#social {
width: 154px;
height: 48px;
}
#social img {
width: 48px;
height: 48px;
float: left;
margin-right: 5px;
background-image: url('icons.png');
background-position: 0px 0px;
}
#social img:last-child{
margin-right: 0px;
}
#social img#twitter {
background-position: -48px 0px;
}
#social img#facebook {
background-position: -96px 0px;
}
Then make a PNG file with just the icons without any padding
I only can think of the use of padding:
HTML:
<div>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/googlesmall.png"/>
<img class="imagePadding" src="Images/linkedinsmall.png"/>
</div>
CSS:
.imagePadding
{
padding: 10px;
}
For vertically centering the block please check the following fiddle http://jsfiddle.net/L4su9/3/
.socialbuttonstop
{
height: 150px;
width: 35px;
position: absolute;
top:50%;
margin:-75px 0 0 0;
/* negate top pixels =-"total height/2" */
background:#000;
}
Semantically you should have the HTML set up using an unordered list:
<ul>
<li class="facebook"><span>Facebook</span></li>
<li class="linkedin"><a href="#"><span>Linked In</span></li>
</ul>
CSS:
ul {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
display: block;
}
ul li {
display: block;
width: 35px;
height: 35px;
}
ul li a {
display: block;
background-image: url(facebookSmall.png) no-repeat center;
}
ul li a span {
display: none;
}
Quick explanation. Basically the unordered list tells the browser or someone who is blind that it is a list - which it is. It is a list of social media buttons.
The anchors allows the user to click and go to your Facebook/Linked In page while the span tags enable you to provide helpful text to Google/search engines and those who are blind.
Of course, you CAN still you use the original HTML code that you have but then you should at the least apply alt attributes to the images and consider linking them with parent anchors.
I think this is more than enough information to get you started. I don't think it's fair for me (or anyone else) to give you the complete code. That's the beauty of coding! Problem solving.
So I've been having trouble horizontal centering two images in a div called content-pic. I've tried the solutions found here How to vertically center image inside div and here How to vertically center image inside div the solutions didn't seem to work for my problem specifically. My question is how do horizontal center images via css in my div content below header? I is there a property that I'm missing or am i just going to have to mess around with padding/margin until they look right?
html
<body>
<div id="wrapper">
<div id="header">
<div id="mast"><img src="http://i1256.photobucket.com/albums/ii488/terafanb/guildwars2/26.png" height="99" width="774=" /></div>
<div id="below-mast">
<!--Start of below mast -->
<img class="nav" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="226" border="0" alt="Crusader Army" />
<img class="Guy" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="549" border="0" alt="Crusader Army" />
</div>
<!--end of below mast -->
</div>
<!--end header -->
<div id="content">
<!--Start of content -->
<img class="content-pic" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="252" width="184" border="0" alt="Crusader Army" />
<img class="content-pic" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="252" width="184" border="0" alt="Crusader Army" />
</div>
<!--End of content -->
<div id="footer">
<ul>
<li>Home</li>
<li>What is a 1031 Exchange?</li>
<li><a href="exchangeRequ.html">
1031 Exchange Requirements</a>
</li>
<li>Types of Exchanges</li>
<li>How to get Started</li>
<li>Why CLX?</li>
<li>Resources</li>
<li>FAQs</li>
<li>Fees</li>
<li>Contact Us</li>
</ul>
</div>
<!--end of footer -->
</div>
<!--End of Wrapper -->
CSS
body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto; /* use shorthand */
width: 774px;
}
#content {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: green;
}
ul {
list-style: none;
margin: 20px auto;
width: 600px;
}
dd {
margin-left: 6em;
}
.nav{float: left;}
.Guy{width:500px;
margin-left: 30px;
}
.content-pic{}
.we-pay {
font-size: 13px
}
.note{
text-align:center;
}
.disclaimer {
font-size: 13px;
text-align: center;
font-weight: bold;
font-style: italic;
}
.FAQ{
font-size:14px;
}
.FAQ li{
margin:20px 0px 20px 0px;
}
.Question{
font-weight:bold;
}
#footer {
clear:both;
text-align:center;
margin-top:300px;/* The margin is so large becuase it is cleared and need to be larger much large than content */
}
#footer li {
display: inline;
border-left: 2px solid #000;
padding: 0 3px 0 3px;
}
#footer li:first-child {
border: none;
}
#footer a {
font-family: Helvetica, sans-serif;
color: #300000;
}
Here is my code on code pen for you convenience http://codepen.io/Austin-Davis/full/fJLEn.
just remove the float: left; attribute from the content div. It will center the images.
Tell me if it is not what you want.
you should remove float:left from #content div
#content {
/*float: left;*/
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: green;
}
Remove float:left and it'll work fine
I dont see a div called content_pic so I assume you want to center the div with id #content that has the img.content_pic in it.
Since its parent has a fixed width you could use the same technique you are using to center the wrapper:
#content {
margin: 0 auto;
}
Based on your edit I now understand that you want to center the images inside the div #content. Well since that div does not have a set width, it is shrink wrapping your images. It doenst have room to justify your images horizontally.
You will need to set the width of the content div to be that of the wrapper and then center its contents, or you will have to give it a set width that is smaller than the wrapper and then use the technique I originally described.
Currently have a problem with some DIVs overlapping their containing DIVs. See image below (the 3 products at the bottom):
All the body content of the page is held within the #content DIV:
div#content {
width: 960px;
float: left;
background-image: url("../img/contentBg.png");
background-repeat: repeat;
margin-top: 10px;
line-height: 1.8em;
border-top: 8px solid #5E88A2;
padding: 10px 15px 10px 15px;
}
And here is the CSS for the product boxes within the #content div:
.upper {
text-transform: uppercase;
}
.center {
text-align: center;
}
div#products {
float: left;
width: 100%;
margin-bottom: 25px;
}
div.productContainer {
float: left;
width: 265px;
font-size: 1em;
margin-left: 50px;
height: 200px;
padding-top: 25px;
text-align: right;
}
div.product {
float: left;
width: 200px;
}
div.product p {
}
div.product a {
display: block;
}
div.product img {
float: left;
}
div.product img:hover {
opacity: 0.8;
filter: alpha(opacity = 80);
}
div.transparent {
opacity: 0.8;
filter: alpha(opacity = 80);
}
And here is the HTML for the boxes:
<div class="productContainer">
<div class="product">
<h2 class="upper center">A2 Print</h2>
<a href='../edit/?productId=5&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A2-Print.png" alt="Representation of image printed at A2 Print through Website." /></a>
<p class="upper">16.5 inches x 23.4 inches<br /><strong>£15.99</strong></p>
<p class="upper smaller"><em><span><span class="yes">Yes</span> - your picture quality is high enough for this size</span> </em></p>
<p><a href='../edit/?productId=5&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
<div class="productContainer">
<div class="product transparent">
<h2 class="upper center">A1 Print</h2>
<a href='../edit/?productId=11&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A1-Print.png" alt="Representation of image printed at A1 Print through Website." /></a>
<p class="upper">23.4 inches x 33.1 inches<br /><strong>£19.99</strong></p>
<p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p>
<p><a href='../edit/?productId=11&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
<div class="productContainer">
<div class="product transparent">
<h2 class="upper center">Poster Print (60cm x 80cm)</h2>
<a href='../edit/?productId=12&align=v' class='upper'> <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7Poster-Print-(60cm-x-80cm).png" alt="Representation of image printed at Poster Print (60cm x 80cm) through Website." /></a>
<p class="upper">23.6 inches x 31.5 inches<br /><strong>£13.95</strong></p>
<p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span> </em></p>
<p><a href='../edit/?productId=12&align=v' class='upper'><span>Select</span></a></p>
</div>
</div>
Any idea what could be causing these DIVs to overlap? What I'd like is for all the boxes to fit within the #container div as expected. It's driving me crazy!
Cheers
Did you try to set to the footer
clear:both;
Also, set to the #content
overflow:hidden;
Add overflow: auto; in your content div CSS :)
Something a lot of people use is called clearfix. here is the code:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
To use this you just add the class clearfix to container. You will probably want to add it to whatever div is containing all the "productContainer"