I'm not sure how best to explain this, but I'll do my best. I have Drupal theme that has a shadow border and text padding on the main content/post DIV. However, on some pages, I would like to override the text padding so that a DIV tag can be full with of the content DIV.
I could probably achieve the same sort of thing by removing the text padding and adding it manually on each page, but this would be a lot of work; especially considering that I would only need to use this "special" DIV on a few pages.
I hope that makes some sense - there's probably a better way to explain it though which is why I can not find the answer myself! Thanks in advance
Use a negative margin on the child that is equal to the parent's padding. I.e:
div.parent {
padding: 0 10px;
}
div.child {
margin: 0 -10px;
}
Related
I wanted to using a flexible horizontal list menu, and I found one on github that came with a collapsing menu at a certain breakpoint. I didn't need the collapsing menu so I got rid of it. I've been modifying the menu to cater to my layout. There are a couple issues that I can't seem to figure out.
There seems to be a left margin to the menu that I want to get rid of.
On the right side of the menu, while shrinking the browser, the last menu item seems to get overlapped instead of pushed in.
I would like to reduce the margins between list items
Normally this wouldn't be a problem for me, but I've not really worked much in percentages.
.flexnav {
overflow: hidden;
margin: 0 auto;
width: 100%;
max-height: 0;
}
FIDDLE
Add padding: 0; to .flexnav style definition.
To remove padding just use css:
padding:0;
You mention "unwanted", so a tip from what I usually do is, at the top of the style sheet I write this out:
*{
padding:0px;
margin:0px;
}
This will remove padding and margin from all things that have padding or margin by default, so you will no longer have "unwanted" padding or margin, instead you can separately add padding and margin to things you actually want.
I use this approach on all websites I make.
Ok, if you go here: http://opportunityfinance.net/Test/2013conf/index.html
You will notice 2 layout issues
This image of the 3 logos needs to be below the "Gold" <h4> tag. But for some reason it won't do it. I have assigned the <div> tag a position of relative since there are other divs within it that need to align the images to the bottom, and this does it correctly, however, it now won't go below the <h4>Gold</h4> HTML.
Next Layout issue:
I have been trying like hell to get a footer on the bottom of the page. Sounds simple right? WRONG! But now that I got the div to be at the bottom, it seems to be cutting off the top area divs above it. So, not all of the content is showing. Instead it is being pushed underneath of the footer. How can I fix this? Tried to put a padding on it, but now sure where and/or how? margin-top on the footer doesn't seem to do anything either.
Any help on this is greatly appreciated. I have been struggling like hell to get this simple layout in order. It should be a fluid layout, as I'm resizing text down as the page resizes also, which seems to be perfectly fine, except for these 2 problems :(
EDIT
Here is a pic of what it looks like when applying the container div a 100 pixel height value:
It is giving it too much space between the <h4>Gold</h4> and the 3 images. Atleast this is the case in Opera. Any possible work-arounds for this?
here's a fix for one
.body {
background-color: #FFFFFF;
padding: 2em 2em 52px 0;
}
you have 3 logo's in one div, on that div add a height, for example
element.style {
height: 100px;
position: relative;
width: 100%;
}
Pretty basic stuff really, you should look into clearfix's here http://css-tricks.com/snippets/css/clear-fix/
When you add a float or position:absolute; to a div, in a way it gives up its reserved space so that causes the parent div to think that there isnt anything inside and therefor has no height, clearfix will fix these problems for you, reason i say is becuase the 3 logo's are all either floated or absolute;
this is the result i get
Css question here: How do I set the width of a container just wide enough for how many characters are in the container?
Thanks for your help, -Matthew
display: inline-block is an easy way to do this.
float: left is another option.
Make sure an explicit width is not being set, because that will disable the shrink-wrap behaviour.
http://jsfiddle.net/5jyAg/
it depends on the container, if you use a span as the container, it will always be as wide as the characters in it.
but a span is inline element
You can try to put and even Padding into your style. For example if your markup looks like this.
<div>
<p class="paddThis">Your text</p>
</div>
and in your style sheet set the padding of the right and/or left of the text your text will push the left and right border of your container a certain amount of pixels away from you text creating which should accomplish what you are trying to do.
Your style sheet might look like this
.paddThis
{
padding: 0 5px 0 5px;
}
I'm sure the answer is obvious, but I haven't been working with html/css that much...
There is a gap of white space in between the top of the browser and the first div. I don't really get why the gap is there. I didn't use margin-top or padding-top or border-top in the css, so why is there a gap?
Thanks!
While it would be extremely helpful if you actually posted some code or a link to the site, I would assume it's just the default padding. Most browsers have default styles for things like body that you may want to clear. Try something like this:
html, body{
padding: 0;
margin: 0;
}
If that doesn't fix it you'll need to give more information.
Without seeing anything I'd imagine you either need to clear the default padding on the body element or you have a heading tag in that div that is adding some extra goodness.
Are you using a reset? http://meyerweb.com/eric/tools/css/reset/
if the page is wrapped with a wrapper, use:
#wrap{
margin:0 auto;
padding:0
}
Once again, some context would be nice but if these solutions aren't cutting it, then there's a good change your a victim of collapsing margins. Try setting the overflow property of the body to auto
I had the same problem. Floating the upper divs solved it.
I had the same problem. It was fixed when I added 30px of padding to my div container. I used
.top-container {
padding-top: 30px;
}
My problem happened after I set some images to an absolute position in my div (which had a position of relative.) For some reason that gap appeared, but setting the padding worked for me.
I know this is 9 years old but...
body { margin:0; }
type that in between the Tags and it should work
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/