I am new to CSS/HTML and I am having some trouble adjusting the width of my page. I'm sure the solution is very simple and obvious lol.
On this page: http://www.bodylogicmd.com/appetites-and-aphrodisiacs - I am trying to set the width to 100% so that the content spans the entire width of the page. The problem I am running into is that when I try to add inline CSS, the external stylesheet called in the head is superseding the inline. I am using Joomla, so the editor let's edit the body, not the head (unless I create a custom module that rewrites code for the head).
I do not want to re-write/edit the external (main) stylesheet, since I am using this page for a contest and it is only running for about 1 month.
Anyone have any ideas how I can achieve this using inline CSSS and what the code would be?
Any help is greatly appreciated!!
#main, #content, .landing-wrapper, #column2 .box2 {width: auto;}
#column2 {width: auto; float: none;}
You should be able to place this in the head of your template's index.php, though I would personally add it to the bottom of the theme's main stylesheet. How long it's there isn't a factor.
you need to find the #main selector and set it wider there. The body is always going to be 100% wide unless you explicitly set it otherwise. In your case the #main container is the wrapper around the whole page, this is what you want to set. I'd also recommend looking up the "box model" and understanding how that works before going too much further. It will save you much weeping and gnashing of teeth. http://www.w3schools.com/css/css_boxmodel.asp
try adding inline .css {width: 100%; (or auto)} to :
- #main
- #content
- .landing-wrapper
- #column2 .box2
Related
I cant figure out how to remove the gap between the header and the main content. According to Firefox Firebug it is controlled by the main-container col2-left-layout class. But changing either of these doesn't remove the gap.
http://ultraviolet-water-treatment-systems.co.uk/sl-dev/
Any help please?
Thank you,
Kirsty
I assume you are using Magento's RWD (Responsive Web Design) theme.
There is padding on the .main-container if that helps your situation:
In /skin/frontend/default/rwd/css/styles.css add:
body .main-container.col2-left-layout {
padding-top: 0px;
}
I prepended body to try and override some existing styles that may prevent that space. If this still doesn't work then try adding !important before the semi-colon
Hope this helps!
I don't know what's going wrong, but I have the same style rules directly written as css (index.css) and written in less(style.less->style.css).
When I load my page with index.css, then my leaflet-map is shown correctly, but when I use style.css, everything is loaded, but the map-container has a height of 0px.
Because this all is a bit more complicated, I put you the code in a jsfiddle.
index.css: http://jsfiddle.net/Lhfy89kn/
style.css: http://jsfiddle.net/86y3y17v/
I'm searching for the solution since a year but I don't see the mistake because apart from the fact, that the rule is more precise when I precompile, so body app map #map_canvas instead of just #map_canvas I don't see any differences...
Hope you guys can help me!
P.S:I know the map-tag has a different purpose in HTML5 :)
Your LESS generated stylesheet lacks the following CSS:
html {
height: 100%;
}
Without this, none of the children containers have an appropriate height to display their contents. Here's an updated fiddle with the issue resolved:
http://jsfiddle.net/86y3y17v/1/
Use html, body, map, #map_canvas and not html body map { height: 100%; }
http://jsfiddle.net/86y3y17v/2/
I was wondering if there was a way to use css to style a wrapper a certain way ONLY if it had a div with a specific id inside. Let's say that I have
<div class="intro_wrapper"></div>
in several places throughout the site but want to change the padding ONLY if it
<div class="intro_wrapper">
<div id="slider"></div>
</div>
has #slider inside of it. The thing is that I want to make it have less padding when #slider is nested in it so I can't really mess with the margin for #slider without cutting off the content all weird. I tried using negative margins but it ends up cutting off the image I have in a weird way.
I know you can use stuff like p + p for paragraphs that have paragraphs following them, so I am assuming there may be a way to do something like I am trying to. Thanks in advance.
You cannot do that with any CSS rules at this point as a reverse combinator to apply style on parent based on child. Instead you can hack it by adding a margin to the child instead.
div.intro_wrapper > #slider
{
margin:20px;
}
Whilst I think PSL's answer is already pretty good (cross browser, simple etc.) it doesn't help if you actually need to use a parent selector. Whilst at the moment it's best to avoid this when you can, there are definitely some circumstances which may require a parent selector (or some such alternative).
One solution if you absolutely have to use a parent selector would be jquery, its selector engine recongnises the :parent selector, for example you could do:
$("#slider:parent").addClass('padded_intro_wrapper');
Then in your CSS:
.padded_intro_wrapper
{
padding: 20px;
}
Equally, if the #slider div isn't always inside the .intro_wrapper div you could do:
$('#slider').closest('.intro_wrapper').addClass('padded_intro_wrapper');
That's where it starts getting a bit messy though.
EDIT: Fiddle if you're feeling lazy
Basically, I want to reset (undo) a Twitter Bootstrap 2.2 reset for img that originates from the reset.less file.
Twitter Bootstrap is essentially setting this css:
img {
width: auto\9;
height: auto;
}
What CSS can I add after this to undo this? I'm actually using the bootstrap-sass gem, so that's what I need to deal with.
If I comment out the CSS in the gem source, my issue is resolved, but that doesn't help me when the gem is loaded by heroku. So I need a local override/monkey patch to fix this.
Thanks. Here is the issue: https://github.com/desandro/isotope/issues/335#issuecomment-11507013 and here: https://github.com/twitter/bootstrap/issues/6541
The problem without this patch is that the awesome isotope library can't function properly as chrome and safari can't draw the images correctly.
You can add in a new duplicate selector underneath this one:
img {
width: auto;
height: auto;
}
That should override it.
Adding it into a new file that is called under the main one in the <head> section of your document would work too.
I posted the answer here: https://github.com/twitter/bootstrap/issues/6541
Inlining this in the CSS worked, like this:
<img src="blah-blah" width=398 height=265 style="width:398px; height:265px">
In fact, I also tested Isotope without using the width and height attributes, like this:
<img src="blah-blah" style="width:398px; height:265px">
And that worked fine! Any recommendation if it's better to only specify the CSS?
I was able to very easily test this without bootstrap (or bootstrap 2.0) by using this CSS:
img {
width: auto;
height: auto;
}
It seems that the width and height in the CSS do override the image properties, and before the images get loaded, the browser does not know how much space to allocate, and then, even after the images load, the spacing is still wrong, at least with Isotope. Inlining the style does workaround the issue. I think I tried using regular styles, but that didn't seem to work, but I may have had a CSS priority issue. Any way, since the image size is laid out with the image properties, it's rather natural to put in this tiny bit of inline CSS. I hope we eventually find a better solution, as this will surely affect others when upgrading.
Or at least this should be documented that one needs to use the inline style for the width and height of the image rather than the properties.
I've read about quite a few people having a problem with this and I've tried all the solutions I can find - hopefully someone can't point out where I'm making a mistake.
I'm working on this site, and as far as I can tell, I'm in standards mode. The doctype is the first thing in the file, and it's valid. I've tried using a wrapper div or body tag with text-align: center and the container div using text-align: left.
I can't seem to find anything that works. Any ideas would be greatly appreciated.
Your problem looks like it's in the ie7.css file. It has this rule:
* {
display:inline;
zoom:1;
}
Inline elements don't have margins. You'll need to drop this rule, or add display:block; to .container_12 somewhere.