I'm trying to set-up a shopping cart for my site, and I lack some knowledge in correctly using css to format the three columns when the browser is resized.
The css originally had the following:
.threeFrames .leftStyle {float: left; position: relative; width: 20%;}
.threeFrames .centerStyle {float: left; position: relative; max-width: 60%;}
.threeFrames .rightStyle {float: left; position: relative; width: 20%;}
But this didn't have the effect I wanted. I want to set the two end columns to fixed width 240px however, when I do this, when the browser is resized, it bumps the right hand column below the others, whereas I want just the middle column to shrink.
If you make .rightStyle {float:right;} and don't style the middle column at all, it will automatically wrap around when possible.
Related
I have a question around vertically centering images which I haven't been able to find a solution to and would love to tap some other folks' brains. I am working on this page: http://www.heirloomtileworks.com/newsite/gift-tiles
The usual solutions haven't been working so far (at least not the way I've implemented them). My images are not contained within a div on a per-row basis; rather the rows of images are created by clearing floats every 4n+1 child elements.
The images may be a variety of heights, and the div is also not of fixed height. Images are added via the content manager. Each image is contained within div styled in this way:
#gift-tile-small-container {
width: 120px;
position: relative;
min-height: 100%;
overflow: hidden;
float: left;
margin-right: 30px;
text-align: center;
margin-bottom: 20px;
}
These divs containing images currently flow down the page within a div (#gift-tile-container). So each row is created not by a separate div, but like so:
div#gift-tile-container div:nth-child(4n+1) {
clear: both;
}
I would like each #gift-tile-small-container div to align with the others in its row, so that the vertical centerpoint of each div is aligned with that of it's rowmates.
If you need to see the HTML as well, let me know, although it is written in Textpattern native tags and not normal HTML. It should be fairly self-explanatory. I appreciate your help!
You can try this out. Use inline block for the containers. I reduced the right margin because between each div container, there is white space. I tried this in firebug and it seems to work
#gift-tile-small-container {
display: inline-block;
margin-bottom: 20px;
margin-right: 25px;
min-height: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 120px;
}
Again, as I mentioned in the comments, if you need to apply the same style to multiple elements. Use class instead of ID.
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I have a design challenge. I have two spans, side by side, and I don't really know how to do that kind of CSS and still make it responsive. I'd have too big of margins on one view port size and two small on another. Any suggestions on how to make it look kinda the same on every screen size, without a big space in between?
My CSS: (I know it's kinda long)
#lattice {
height: 93%;
width: 30%;
position: fixed;
background-color: white;
top: 40px;
right: .75%;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
overflow-y: scroll;
}
#intendedContent {
font-size: 16px;
position: fixed;
background-color: white;
top: 40px;
left: 1%;
display: inline-block;
overflow-y: scroll;
height: 93%;
width: 62.5%;
padding-left: 20px;
padding-top: 0px;
padding-right: 20px;
word-wrap: break-word;
line-height: 175%;
}
Relying on an XMLHttpRequest object, I really only have two spans:
<span id="intendedContent">
</span>
<span id='lattice'>
</span>
It's hard to answer your question without knowing exactly what you're trying to do, but I suspect you are trying to make the spans stay side-by-side at any window size, but they are in fact stacking one on top of each other at small window sizes. Is that correct?
If so, you have three basic options:
Currently, you are setting relative (percent-based) widths for your elements but the padding is set in absolute units (px). This is probably forcing the combined widths of the span elements to be greater than 100%, which is the width of the browser window, because the percentage width taken up by the absolutely-sized padding is greater at smaller window sizes. You can set your padding in percent and make sure the combined widths of both elements (including widths, padding, margins, and borders) plus the one character space rendered between inline-block elements is less than 100%. Or...
You can set box-sizing: border-box; on the spans and, thus, their padding will be rendered inside of the width you set. See here for more on box-sizing. If you do this, don't forget the prefixed versions (e.g. -webkit-box-sizing: border-box).
Arguably, to make your site responsive, as you mentioned in your question, you should not want the spans to appear side-by-side at every browser width. For example, on a portrait-oriented phone your users would probably find it more accessible to have the spans stacked one on top of each other. Whilst this goes outside the scope of your question (and I do not know what you are intending to do with the span elements), I would suggest doing this with media queries.
If you edit your question to let us know your intentions I can be more specific and helpful :)
I've been trying to make a joomla template with on the left and on the right a bar with fixed width. the main div should be responsive.
I managed to create the layout what i want here:
http://dennybeulen.nl/rena/nl/over-ons.html
The only thing what is not working is the menu on the left side. When i change the css the menu works, but the layout is not right anymore.
the menu is working if i make these changes (just removed the '-' in front of 130):
div.fluid{
margin-left: 130px;
}
hope somebody can give me some hints.
Looks like div.fluid is covering your left column.
Try making div.left absolutely positioned and setting your div.fluid to having no left margin:
div.fluid{
float: left;
width: 100%;
margin-right: -290px;
margin-left: 0px;
}
div.left{
position: absolute;
width: 130px;
min-height: 1px;
padding-top: 10px;
}
Keep in mind, div.left will no longer affect elements floating against it.
#gaynorvader is right in that your middle container lays on top of the menu. Instead of positioning it absolute, you could also just leave everything as is, and only add position:relative;z-index:1 for div.left.
I have a fluid article that has 2 columns 1 contains an image that fills whatever space is available for that column, the other column has text but I'm not sure how I can make this column .content-col occupy the space provided by .article. Can anyone advise how this can be achieved?
Jsfiddle http://jsfiddle.net/R7AuG/
CSS Snippet
.img-col{
width: 25%;
float: left;
}
.content-col{
background: black;
width: 75%;
float: left;
}
.col{
width: 50%;
float: left;
}
I also understand that this could be achieved with display:table but I'm wondering if this can be done without?
If you don't want to imitate a table, you could use a small CSS trick, namely, adding
overflow: hidden
to article, plus applying
margin-bottom:-1000em;
padding-bottom:1000em;
to .content-col
See example