I am building a 3 column fluid layout, and have gotten 90% the way there. I am wondering on what is the best way to impliment the background, or side bars - however you want to look at it.
I have a good box hack that centers my main content area, and now I need to impliment the two stripes you see on either side that has a small 1px border on the respective inside border.
I could create a 1px high stripe that is 1000's of pixels wide, but I have a feeling there is a much better way to do this - possibly with pure CSS?
Am I now looking at a 5 column layout here, or is this still a three column fluid?
If anyone can provide a good pattern or link for this style of layout (its probably the most common out there nowadays, huh?) I'd really appricaite it!
Here is my current fluid wrap code:
css:
body
{
margin: 10px 0px;
padding: 0px;
text-align: center;
}
#siteWrapper
{
width: 980px;
margin: 0px auto;
text-align: left;
padding: 15px;
background-color: #fff;
}
HTML
<body>
<div id="siteWrapper">
</div>
</body>
body
{
margin: 10px 0px;
padding: 0px;
text-align: center;
background: whatevercolor;
}
#siteWrapper
{
width: 980px;
margin: 0px auto;
text-align: left;
padding: 15px;
background-color: #fff;
border-left: whatever;
border-right: whatever;
}
Related
I have а search page and want to prevent "top20" div section on the right to move below the section rounded by rectangle when I change the size of browser window.
CSS:
#search_parameters_border {
border: 1px outset gray;
float: left;
padding: 10px;
}
#searchBox {
background-color: white;
color: black;
text-align: left;
margin-bottom: 15px;
}
#categories {
line-height: 20px;
height: 420px;
width: 250px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#additionalFilters {
width: 700px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#top20 {
width: 650px;
padding: 5px;
margin: 5px 5px 5px 50px;
float: left;
}
The screen shot:
Since you don't have a containing element for your floats, the phone is allowing your last float to get pushed down below where you're not wanting it to go. It's generally a good idea to use a "container" or "wrapper" div as you'll see them referenced to at times with your site's maximum allowed width to surround your builds (or min-width if you want to get a little fancier.) It will solve your issue as well as help you stay organized. As well, like in this situation, if you run into problems, sometimes it can be faster to just set a property in your "container" div to "position:relative;" and then position the div you're having trouble with absolutely via "position:absolute; top:100px; left:50px;" or something similar for spacing. If you have any questions about anything above or in the other comments let me know and I can explain in more detail.
As you're using absolute values for all widths you need to give a min-width to the surrounding container. Than you're top20 div will not move.
But you should consider making you're style more fluid.
I'm working on the unbounce landing page platform. Overall, it's really awesome and makes A/B testing pretty easy. It's more or less just drag and drop, but you're able to add css, html, javascript, etc.
Anyway, I'm working on creating a fixed signup area on the bottom of the screen (should boost conversions), but I'm having some troubles. The signup box is created within the wysiwyg dashboard, and from what I see it just builds the CSS for you, as you move sliders, change colors and such.
I'm able to make the entire signup area float right to the bottom, but I can't get the signup box to stay centered. I can use margins and positioning, but not the align: center function.
I've tried doing margin-left: auto; margin-right: auto as well as text-align: center; but it does absolutely nothing!
When changing the size of the screen, it just will not stay centered. But here's the kicker; the text has no problem centering with just width: 100%.. The signup box doesn't seem to respect any wrapper and I'm thinking this might be the problem.
This is all the CSS I'm using to create this fixed section:
#lp-pom-box-214 {
top: auto !important;
display:block;
position:fixed;
margin-left: auto;
margin-right: auto;
bottom:0px;
width: 100%;
align: center;
}
#lp-pom-form-51 {
top: auto !important;
display:block;
width: 100%;
position:fixed;
bottom: 25px;
margin-left: 26%;
}
#lp-pom-text-211 {
top: auto !important;
display:block;
position:fixed;
bottom:75px;
width: 100%;
}
Thanks a TON in advance!! This client is really good to me, so I want to do a good job for them. I'm not a great coder, but I'm very good at marketing so feel free to give me a shout if you need help in that arena :) That's the best way I know how to give back to whoever helps me out (or anyone else in the community for that matter).
Thanks again.
You can't adjust the position of a fixed positioned element in this way.
A fixed position element is positioned relative to the viewport, or the browser window. The viewport doesn't change when the window is scrolled, so a fixed positioned element will do exactly as the name implies and remain fixed in it's assigned position. To position a fixed element you use the properties top, right, bottom, and left
If you want to keep it as a fixed positioned element you can vertically and horizontally center it on the page by setting top and left to 50% so as the left-top corner of the container is centered within the page, you can then use margin-top and margin-left with negative values to compensate for half of the width and height of the element to achieve true center within the center of your container.
Something like this?
if yes check this code
css
.fixed-bottom {
position:fixed;
left:0;
bottom:0;
padding:10px 0;
background:#CCC;
width:100%;
}
.fixed-bottom h1 {
text-align:center;
}
#lp-pom-button-52 {
display: block;
z-index: 61;
width: 175px;
height: 54px;
line-height: 54px;
behavior: url(/PIE.htc);
border-radius: 8px;
background-color: #ff0000;
background: -webkit-linear-gradient(#ff0000,#e60000);
background: -moz-linear-gradient(#ff0000,#e60000);
background: -ms-linear-gradient(#ff0000,#e60000);
background: -o-linear-gradient(#ff0000,#e60000);
background: linear-gradient(#ff0000,#e60000);
box-shadow: inset 0px 1px 0px #ff4c4c,inset 0 -1px 2px #b30000;
text-shadow: 1px 1px #5c0000;
-pie-background: linear-gradient(#ff0000,#e60000);
color: #fff;
border-style: solid;
border-width: 3px;
border-color: #333333;
font-size: 24px;
font-weight: bold;
font-family: arial;
text-align: center;
background-repeat: no-repeat;
float:left;
margin:0 0 0 10px;
}
#lp-pom-form-51 .lp-pom-form-field input[type=text] {
border-style: solid;
border-width: 10px;
border-color: #002c77;
}
a {
color: #ff0000;
text-decoration: none;
}
I have built a site, but now there needs to be some changes. There is a main picture on the left and a varying bunch of thumbnails aligned on its right floating against the big picture. I want to enlarge the big picture to take up the page, but the little pictures go over the right toolbar, and generally all over the place. I can get them under the main picture as I want to, but they stay to the right with some inexplicibly created margin.
I just want the main picture to cover the page, and the little ones in a line underneath
The site page is here:
http://www.residentialrealtors.co.uk/properties/12-chelsea-cloisters-sloane-aven/
The code affecting these divs is:
.fsrep-main-image {float: left; margin-right: 8px; text-align: center;}
.fsrep-main-image img { padding: 1px; border: 1px solid #CCC; }
.fsrep-images { }
.fsrep-aimages {margin-left: 0px;}
.fsrep-aimage { float: left; width: 100px; height: 80px; padding: 0 10px 5px 0; margin-bottom: 4px; text-align: center; }
.fsrep
-aimage img { padding: 3px; border: 1px solid #CCC; }
Main image is the big one. Aimage is the small ones ontheir own, and aimages is the small ones as a group.
I hope someone can help. I am going nuts trying to fix this
try adding a clear class to html tag:
<div id="fsrep-aimages" class="clear">
and then add this to your css(unless you have an equivalent)
.clear { clear: both;}
and remove your 362px margin from that div too. this should then move below and stop blowing up in your face.
You are then able to make your large image larger to the full width of the div
I just stumbled on a problem where the shared border between a menu bar and the main content box does not go on properly (as the content box is too small)
Image: http://imgur.com/O3ra9
Code: http://jsfiddle.net/gh55e/2/
So I was wondering if there was a way to fix the border. Maybe by giving them both one and making it overlap? Just have no idea how to do this as margin -x doesn't work.
Give the right element a border all around, then use the margin-top and margin-left properties in the negatives to make them overlap. Here's an updated jsfiddle:
http://jsfiddle.net/gh55e/4/
CSS:
#right {
width: 85px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-top: -54px;
}
For later visitors, this is the CSS that eventually fixed it.
#right {
width: 385px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-left: -10px;
}
You basically make a margin of 10px and move it back for 10 px
/* Normal Bubble */
.bubble {
width: auto;
font-size: 0.75em;
margin-bottom: 24px;
}
.bubble blockquote {
margin: 0px;
padding: 0px;
border: 1px solid #c9c2c1;
background-color: #000;
}
.bubble blockquote p {
margin: 10px;
padding: 0px;
font-size: 21px;
}
.bubble cite {
position: relative;
margin: 0px;
padding: 7px 0px 0px 15px;
top: 6px;
background: transparent url(b/tip.gif) no-repeat 20px 0;
font-style: normal;
}
I have this for my comments.. that looks like "speech bubbles" .
I dont want it big from the beginning, i want to have it custom after the text.. I mean if you wrote "hello" then it should be around it with maybe 1-2px margin from the bubble, so if you wrote "Hello my name is and i like to cook!" then it should be bigger..its like this right now:
<div class="bubble">
<blockquote>
<p>the comment text is here</p>
</blockquote>
<cite>Written by me</cite>
</div>
A div, by default, is block level and, therefore, will expand its width to the width of its parent container (rather than its contents).
Two options to consider would be to set the div to
display: inline-block
Or float it.
Do you mean to put it like that?
.bubble blockquote p {
display: inline;
/*(...)*/
}
See http://www.htmldog.com/reference/cssproperties/display/
I'm not sure quite what you are asking either.
Perhaps you are referring to creating a popup (using images) that scales according to the size of the content? To do that you need multiple overlapping images. It it only scales in one direction (vertically or horizontally) you need two images, if it scales in both directions you need to create four images. This technique is sometimes called "sliding doors".