Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 months ago.
Improve this question
I am having problems messing with some css to get it to look the way I want.
Here is the page:
https://diggardensnursery.com/shop/house-home/
I would like catalog the image to be on the left, with the description to the right and the attributes and add to cart below.
I have tried to float the divs to the left and the right. I'm not sure if I have to stick the image in a div and float it left separately. I'm not too versed with PHP so I've been trying to mess with just the CSS to get it to work.
In your site you've got a ton of stuff floating. This is not the best way to do it. Float isn't the same as position, so I think all the things you have set to "float-right" aren't doing what you think. You don't want to float stuff all over the place, just one thing.
In this case the only thing you should be floating is the image, you just need to float that one object left and use it's margins and paddings to line up everything else.
This is a good reference that should help you to get more control over floats.
As for fixing your page:
First, you need to make the image float left. Put sufficient padding to the right, and if necessary put a lot of padding above/below to make things not wrap underneath the image.
div.product_grid_display div.product_grid_item img {
border:medium none !important;
>>> float:left;
>>> padding:0 20px 35px 0; /*this padding worked for me */
}
Second turn off this float left and add a clear:both property;
div.product_grid_item {
>>> float:left; /*DELETE THIS LINE*/
height:auto !important;
margin:4px 8px 8px 0;
position:relative;
clear:both;
}
Turn off the float on div.grid_product_info, div.product_text, and input.wpsc_buy_button as well, and I would add "margin:10px 0 0 28px;" to input.wpsc_buy_button.
You don't need the divs called "div.grid_view_newline" if you add a "clear:both" to div.product_grid_display, so I'd get rid of that.
That should take care of it.
use "float:left;" example: http://www.citiport.net/Sandbox/Jeff/pictureBorder.html
If I understand your question then you need to use spans inside of divs.
<div>
<span>image</span>
<span>description</span>
</div>
<div>
<span>buttons</span>
</div>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Within a WordPress plugin (own creation) I want to position some WooCommerce category images... but there something strange happens.
Each category box is defined more or less in the following way :
<div class="edu-cat-item">
<img src="some-image.jpg>
Title of the cat
</div>
In the CSS the boxes are made to float to the left...
.edu-cat-item {
box-sizing:border-box;
width: 175px;
float: left;
padding:10px;
}
edu-cat-item img {
border-width:2px;
border-style:solid;
}
.edu-cat-item a {
text-align:center;
margin-left:auto;
margin-right:auto;
}
And -not really a surprise- it works... HOWEVER!
The customer wants the selected category to have an orange border.
So in the PHP code an extra class is added to one specific item... The HTML becomes :
<div class="edu-cat-item edu-sub-select">
<img src="some-image.jpg>
Title of the cat
</div>
And the CSS gets an additional :
.edu-sub-select img {
border-color: #ff9900!important;
border-style: solid;
border-width: 2px;
}
And now strange things happen... when it is more than one row, the second row 'indents' one position behind the selected cat... Would love to post images but I need 'reputation 10' to do so...
However willing to share them by mail.
You are missing a quotation mark:
<img src="some-image.jpg>
Maybe that's just an error in posting the question though. Could you create a jsfiddle showing the problem, it's hard to understand what you mean by "indent"
By the way, you might want to try getting rid of float:left; and replacing with display:inline-block;. I avoid the unpredictable behavior of float wherever possible.
Was curious so I made a simplified fiddle myself: http://jsfiddle.net/bca1m1n2/
What's happening is that the border causes the height of the orange element to be taller than the rest. When a floated element goes to the next line, it positions itself against the orange element because the orange element is taller. Behavior seems strange, but is correct - so don't use floats for alignment :)
So if you give .edu-cat-item a fixed height, that also solves the problem
.edu-cat-item {
width: 175px;
height:100px;
float:left;
}
Cool question OP
Alternatively to what Kurt Serge wrote, you could use an outline instead of a border. This way your "border" (outline) does not affect the flow of items.
Here's a little definition of CSS outlines from MDN / W3C (they write the same thing):
Outlines do not take up space
MDN adds the following detail:
they are drawn above the content.
So your css would look like this:
.edu-sub-select img {
outline-color: #ff9900!important;
outline-style: solid;
outline-width: 2px;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I don't know if I formulated my question correctly, so if I didn't I apologize. English isn't my native language.
Can someone give explain and give me an example to achieve the following; I want to have 3 container DIVs (A, B & C). If content is added to container A, the height of containers B & C should automatically match container A.
Now for the 2nd issue; for containers B & C I want to display images. Example (now the problem starts explaining); if container A goes past 100px in height container B displays two images (both 40px in height) and container C will display a single 90px image (in height). If container A goes past 200px more images will show up in containers B & C.
I tried to do this in the past, but failed in several ways. Often I could manage to get the DIV's to match in height, but images looked cut-off. In the end I gave up, because I lack the knowledge and skills to find a solution for this.
Once again I apologize if this doesn't make sense, but it's kinda hard to explain something, when English isn't your native language. So if it's not understandable, just ignore me completely. Just wanted to see if someone understand what I am trying to achieve here. Thank you.
//follow-up
Sam's code for using flex actually worked for the first part. Many thanks for that. I tried it out, though I had a glitch first (caused by using bottom-padding), it works great.
Now for the 2nd part; other than images I am also using text. The longer container A gets, the more stuff (text and images) should be displayed in container C (depending on the height on container A). So the contents in container C should by dynamic (depending on A)? I don't know if it's the right term.
I will show you an example of what I am currently doing. I currently have only 2 columns / DIVs (ignoring the 3rd for the time being, while testing). In container A there is a form. Depending on what options you select on the form, in grows in size (= height) obviously. Now thanks to Sam, the 2nd column has the same height as the first.
Now when you progress on the form it will grow in height, the same goes for the 2nd column, however it has empty space, I want that empty space filled up with text and a few images I created. So the amount of empty space is reduced to a minimal.
So in short; depending on contents in container A, container B should start showing the text and images I entered.
I hope this explains it a bit better?
Thank you once again in advance.
For the equal heights issue you could try using flexbox as an easy solution. Check out Can I Use to see if it's available for the browsers you intend to use. Here is an example to show you how it's used. Try adding and removing text to the first col to see the other cols changing their height according to it.
I'm afraid I do not understand the second issue. But maybe this is pointing you in the right direction.
html, body {
height: 100%;
width: 100%;
}
.wrap {
display: flex;
}
.col {
width: 50px;
padding: 10px;
}
.col.odd {
background: red;
}
.col.even {
background: lime;
}
<div>
<h1>Equal height with flexbox</h1>
<div class="wrap">
<div class="col odd">
blub <br>
test <br>
blub <br>
test
</div>
<div class="col even">blub</div>
<div class="col odd">blub</div>
</div>
</div>
I have divs after each other that look like this.
<div class="tag">one tag</div>
<div class="tag">second tag</div>
<div class="tag">third tag</div>
...50 more of them....
(in CSS)
.tag {
display:inline
}
I found out that I have too many of them and they start breaking in the middle, and I don't want that.
However, when I set the nowrap like this
.tag {
display:inline;
white-space:nowrap;
}
all of them are on one line, making more than 100% of the window. I don't want that.
What I want: if there are too many of these divs on one line, the list of the divs can break, but the divs themselves don't. I just don't want to break the divs in the middle.
I hope I tell it clearly enough.
If I understand right, you want them to lay side to side, and then break to a new line when the row is full, but not in the middle of a div.
All you need is
.tag {
float: left;
}
See fiddle here for demo.
You can also add padding-left: 5px; if you want some space between them.
.tag {
display:inline;
white-space:nowrap;
float:left;
}
That worked. (and adding "clearing" empty div with clear:both under that.)
Depending on the browsers you need/want to support, you may find using
.tag {
display:inline-block;
vertical-align:top;
}
a better solution. Since it is a <div> that you want to apply this to, the style will not work out of the box for IE5-7 - see http://www.quirksmode.org/css/display.html#t03. There are workarounds of course - How to fix display:inline-block on IE6? - if you want to use it with those browsers.
The benefit of inline-block is that you do not need to clear the floated content and also that your elements are not rendered out of normal flow. I try to avoid floating elements where possible as in my experience it has caused layout problems.
However, there are a couple of potential catches with this approach. One of which I have already addressed, by adding a vertical-align:top rule. See a previous answer for why this happens - https://stackoverflow.com/a/12950536/637889
The other is due to potentially unwanted white-space between the inline-block elements. See http://css-tricks.com/fighting-the-space-between-inline-block-elements/ for some clever ways around this.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 3 years ago.
Improve this question
Ok, so I have this site: http://example.com/
And I was wondering two things - A) how can I prevent the side bar from overlapping the text of the resume when the window is small and I scroll? I want the sidebar to scroll vertically, but not horizontally.
B) How can I add little buttons into different parts of the margin? I want to add little buttons to go to my blog, Twitter and such.
I think you will need javascript to do this properly.
try sticking this in your head section and change your css #sidebar to position:absolute;
<script type="text/javascript">
window.onscroll = moveEle;
function moveEle() {
//Alter top to be how many pixels you want from the top of the window
var top = 50;
ele = document.getElementById('sidebar');
if(document.body && document.body.scrollTop) {
ele.style.top = (document.body.scrollTop + top) + "px";
} else if(document.documentElement && document.documentElement.scrollTop) {
ele.style.top = (document.documentElement.scrollTop + top) + "px";
}
}
</script>
Oh, and the buttons, you could just put some anchor tags in the sidebar as well with href pointing to whatever addresses you have at twitter etc. Style them with display:block and then style further. You can make them the size you want with whatever background color and border or background image.
My method for the Buttons, would be not to create individual classes, but create a <div>.
#navigation{margin-top:-50px}
Now, all buttons and all things in that navigation will be -50px to the top.
But, it get's better!
#navigation .littledifference{margin-top:-35px !important}
Now, you can set the button (or again, anything) in that navigation to have this class, and the margin will be different! This saves on having extra coding for every single button.
Edit as Psyrus says above, you could also use <a> tags. This requires a fair amount of work from my own personal experience, though you can do anything with them. My system above should still work though - just make sure the <a> tags still are inside the #navigation and don't have conflicting margin attributes. The class selector should still work as well.
You should use % value.
#wrap{width:100%; max-width:1024px;}
#sidebar{width:15%;}
#main{width:80%; padding:10px 2.5%;}
This way, when you will resize your window, your content size will adjust in consequence. So they won't overlap.
To prevent overlapping You can use negative value and positive Values for specific padding and margin so that you can place any <div> at any place you want.One thing you have to keep in mind you can give negative values and negative percentage while setting padding and margin
.ClassName
{
padding-left:-20px;
padding-top:-10%;
}
I have a div that contains a link:
<div id="like_bar"></div>
With some CSS:
#like_bar{
width:140px;
height:26px;
background:url('bar.jpg');
}
#like{
display:block;
width:20px;
height:20px;
margin:3px 36px;
background:url('mini_img.png');
}
The link is placed at the top of the bar and the margins on the link are applied to the bar. This is annoying. Could someone explain these collapsing margins, how to avoid them and what they're used for.
There are many ways to "fix this".
Perhaps the easiest for you would be this:
#like_bar {
overflow: hidden
}
Other ways include:
Add some padding
Add a border (even border: 1px solid transparent is enough)
float the element
position: absolute
And, like in the snippet above, set overflow to a value other than the default of visible.
You also asked:
what they're used for
A common use case is the <p> tag.
See: http://jsfiddle.net/thirtydot/tPaTY/
Without margin collapsing, certain things would become annoying.
Because I'm lazy I'm just going to link to a few resources:
My answer here explains why the box model is the way it is, which is related to margin-collapsing being included.
The w3c css spec defines the behavior of margin collapsing. It's an expected behavior for convenience given the box model. You don't need to worry about double margins between blocks of content with it. What it sounds like you actually want is some padding around #like, rather than margins.
Think of CSS as a content-centric inside→out approach to styling, rather than a programmed outside→in approach.