Having an issue on this site where the content area won't float next to my side bar.
800px content width. If I add up my content and sidebar divs, padding, etc I'm only coming up with 773px.
This is creating a child template from and then editing the the 2011 wordpress template.
http://www.rogerscomcenter.com/
try this
.left-sidebar #content {
margin: 0 26px;
overflow: auto;
width: 484px;
}
.left-sidebar #primary {
float: left;
margin: 0;
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
}
I've cleared all unnecessary parts, added floats and width to both elements ('primary', 'secondary' divs). All seems ok.
http://imageshack.us/photo/my-images/804/rogerscenterforcommerce.jpg/
Change your css from:
.left-sidebar #secondary {
float: left;
margin-left: 28px;
margin-right: 0;
width: 235px;
}
To this:
.left-sidebar #secondary {
float: left;
margin-left: 28px;
margin-right: 0;
position: absolute;
width: 235px;
}
Related
I am trying to work with markup that someone else has created. My problem is that I have set the width of a parent container for use on other elements, but want to over-ride this on one specific child container that I can target using .ticket13 .text b and set it to 400px. However this doesn't work.
If you check out this jsfiddle you can see the problem. How can I get .ticket13 .text bto be 400px wide without changing the markup?
<div class="left-container">
<div class="ticket13">
<p class="text">
<b> I want this container to be 400px wide </b>
</p>
</div>
</div>
.ticket13 .text b { width: 400px !important; }
p.text {
display: inline;
margin: 5px;
padding: 0;
}
P.text {
font-size: 1em;
font-style: normal;
margin: 0;
padding: 0.3em 0.3em 0;
text-align: left;
text-indent: 0;
width: auto;
}
.ticket13 {
display: inline;
float: left;
width: 186px;
}
.ticket13 {
border: medium none;
float: left;
margin: 0;
padding: 0;
}
.left-container {
background-color: red;
float: left;
text-align: left;
width: 60%;
}
You'd have to make the b a block level element, by either setting it's display to block or inline-block.
Put the markup for the child BELOW the markup for the parent. You shouldn't even need to use !important
Try use that:
.ticket13 .text b {
width: 400px !important;
display: inline-block;
}
To do that you have 2 solutions:
.ticket13 .text b {
width: 400px!important;
display: block;
}
or
.ticket13 .text b {
width: 400px!important;
float: left;
}
<html>
<head>
<link rel="stylesheet" href="../static/styles/base.css" type="text/css" />
</head>
<body>
<div id= "top-nav">
<h1>Sitename</h1>
<ul>
<li>Feed</li>
<li>Profile</li>
<li>Settings</li>
</ul>
</div>
</body>
</html>
#
html,
body {
height: 100%;
width: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#top-nav{
background-color: Gray;
width: 100%;
height: 135px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#top-nav h1{
float: left;
margin: inherit;
padding-right: 700px;
}
#top-nav ul{
float: left;
bottom: 0;
}
#top-nav li{
text-align: right;
display: inline;
padding-right: 5px;
}
What I would like my layout to be, is to have the h1 vertically aligned in the center of the top-nav div and I would like the ul to be on the right of the page at the bottom of the top-nav. Why am I getting unexpected results?
The padding-right: 700px rule in #top-nav h1 is pushing the ul element off-position.
Something like this should work:
html,
body {
height: 100%;
width: 100%;
padding: 0; /* You can just have one 0 instead of "0 0 0 0". */
margin: 0;
}
#top-nav {
background-color: Gray;
width: 100%;
height: 135px;
}
#top-nav h1 {
float: left;
line-height: 135px; /* Set to the height of #top-nav */
margin: 0;
}
#top-nav ul {
float: right;
}
#top-nav li {
text-align: right;
display: inline;
padding-right: 5px;
}
For your nav being on the bottom of the top-nav element, you could use the absolute property, so it always be fixed at the bottom.
Don't use a float left for the H1 as the previous answer say.
For your h1 being align vertically, you can try different padding to get what you want (or you can make a more complicated scaffolding by using the display:table ...)
But the more simple is that :
#top-nav h1{
padding-top:30px;
display:inline-block;
width:auto;
vertical-align:middle;
}
#top-nav ul{
position:absolute;
top:100px;
right:5px;
}
does it answer ?
edit
could it be due to the space you've got in
<div id= "top-nav">
after "id=" ?
also, instead of using padding-right: 700px; for h1 element, just float the ul element to the right.
There is several ways you can achieve what you want. F.e., for vertical aligning the h1 in the middle of #top-nav:
#top-nav h1 {
...
line-height: 135px;
margin: 0;
}
and for aligning the ul at the bottom of #top-nav:
#top-nav {
...
position: relative;
}
#top-nav ul {
...
position: absolute;
bottom: 0;
right: 0;
}
You are having problems because you are using layout elements incorrectly. The <ul> element is for unordered lists, not for menus containing links. Also, using float is highly discouraged because it was only intended to be used to have text wrap around an image and not for layout. Floats have to be cleared and don't work well cross-browser.
The trick here is to use absolute positioning and make sure that the value is relative to the container, so you have to set the #top-nav div to have position: relative otherwise its children will be positioned relative to the first positioned parent element, which is most likely the body element in this case.
This works fine for me:
http://jsfiddle.net/gc3EY/1/
HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="top-nav">
<h1>Sitename</h1>
<span>
Feed
Profile
Settings
</span>
</div>
</body>
</html>
CSS:
body { margin: 0; padding: 0; overflow-x: hidden;}
div#top-nav span {
position: absolute;
bottom: 0px;
padding: 0;
margin: 0;
text-align: right;
width: 97%;
}
div#top-nav span a {
padding: 0 2px;
}
div#top-nav {
background-color: gray;
width: 100%;
height: 135px;
margin: 0px;
padding: 5px;
position: relative;
}
div#top-nav h1 {
position: relative;
top: 0px;
margin: 0;
padding: 0;
}
I already looked at a few answers here in stackoverflow without success, so let me post my link here:
http://www.copycopy.it/index.php?go=how
On this page for example, the white div (#body_content_container) should expand with the content, but it doesn't. The same holds true for this page: http://www.copycopy.it/index.php?go=termsAndConditions
Any idea what I'm doing wrong here? I have tried clear:both; on the child divs, but no luck.
Try removing the height: 100%; from your elements. If you want it to expand to the length of the content, you don't want to specify a height. Besides, it'd only expand to the length of the window anyway.
Remove height: 85%; from #content_text.
Replace both position:absolute; and position:relative; with float:left;.
Replace any top, left or padding with a margin.
For example :
#columnHeader {
float: left;
text-align: center;
width: 940px;
}
#column1 {
float: left;
margin: 0 10px 0 0;
text-align: justify;
width: 285px;
}
#column2 {
float: left;
margin: 0 0 0 40px;
text-align: justify;
width: 275px;
}
#column3 {
float: left;
margin: 0 0 0 10px;
text-align: justify;
width: 320px;
}
I'm having a bit of trouble keeping the topnav on my Web site (if you'll see the link below, the "Home," "Archive," and "About" buttons) aligned with where I'd like to keep it on browser resizing, which is at the right edge of my banner. Originally, I had four buttons and managed to keep everything in order, but things got a little wonky after I dropped one button.
Thanks for all your help.
You can fix it - get your nav to be aligned to the right side, by applying the following changes to your website:
#container-inner {
margin-left: auto;
margin-right: auto;
width: 940px;
}
.topnav {
/*Reset things that are unnecessary*/
margin-left: 0;
margin-right: 0;
position: static;
/*Set things to fix the problem*/
margin-bottom: 20px; /*This accounts for the 20px space between this and the content.*/
float: right;
}
#content {
clear: both;
}
if you put the topnav inside the banner element, and use this css:
.banner {
position: relative;
display: block;
overflow: visible;
margin-left: auto;
margin-right: auto;
width: 930px;
height: 349px;
margin-bottom: 32px;
}
.topnav {
position: relative;
display: block;
top:100%;
width: 930px;
height: 32px;
}
.topnav a{
float: right;
}
The topnav will be constant margined.
Here's the situation: my WordPress Gallery looks fine in Firefox, Safari, etc. but running on IE (under Windows), the the last image in the gallery wraps to the next line.
So far, I've tried adjusting the gallery width, padding, inline, block, and changing the number of columns to no avail. There is plenty of room on the row to fit the images.
Here's what I think are the pertinent CSS bits:
#gallery-1 {
float: right;
height: 70px;
margin: 1px;
padding-bottom: 20px;
width: 480px;
}
.gallery-icon {
width: 55px;
padding: 3px;
margin: 0;
float: left;
}
.gallery-columns-7 {
padding: 0;
margin: 0;
}
.gallery-item {
float: left;
margin: 3px;
padding: 0 2px 0 0;
width: 55px;
}
Anyone have any ideas?
Fix this
<dl class="gallery-item">
{
margin-right: 3px;
margin-left: 3px;
}
Either change it to 1px or delete them or delete just the right or left margin in the styles.css line 1219
Try setting overflow: hidden; in your .gallery-item class.