God Another Question regarding css the test site again was http://testpress.dramend.com/amend-2/, I currently have this main content as a fullwidth with white background:
But what I want to achieve was this kind of boxed layout with the same white background but it needs to be boxed like this sample:
I'm using wordpress optimized press latest versiom, it doesnt have any options of changing a section to boxed or fullwidth, There's an option to changed the background to an image but it would look like this once I've set it to the my background image:
Can I achieved the boxed layout on the second image just using plain css for the main content background?
HTML
//main container
<div style="background:#ffffff; class="row one-column cf ui-sortable" id="le_body_row_4" >
<div class="fixed-width">
<div class="one-column column cols" id="le_body_row_4_col_1">
// image html comes here
.. some more html
</div>
</div>
</div>
Thanks
You can do it through css but the problem is whatever module you are using is adding inline style to it,for example
your container with class row one-column cf ui-sortable and id le_body_row_4 has inline style like this
background:#ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff),
Inline style is given preference over css file styles, if you can remove the inline style and add css to these classes one-column column cols
.one-column .column cols { background: #fff }
It will solve your problem
First of all you are using table so by default, table will take entire horizontal space, so make your container a fixed width and assign margin: auto; to that
.container {
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 1000px;
}
and than use background-color: #fff; on div having id of #le_body_row_4
Related
I have repeating rows/columns setup with Bootstrap's grid system. I want to create padding between these elements, but have their border and background reside inside of that padding. I have tried using margin but that jacks with Bootstrap's grid layout on the column level.
The below is a very trimmed down version of what I'm working with, which illustrates the point. I would like to modify this so that the blue border hugs the white inner box, and you don't see any red (in my case it would show up behind text). I need to achieve this without modifying the essential html layout of what's there already, so relying just on CSS.
To clarify what I'm going after... I want to add padding between the rows & columns. If I just straight add padding to the outer div (as exists below) the border and background color extend outside of that padding. I want the border and the background color to exist within the boundaries of the padding I add.
I have tried using a variety of box-sizing settings to no avail, as well as all manner of padding/margin I could think of.
JSFiddle: https://jsfiddle.net/2v94yg2s/
HTML
<div class="container-fluid">
<div class="grid-data row">
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
<div class="col-md-4"><div></div></div>
</div>
</div>
CSS
.grid-data {
padding: 15px;
}
.grid-data > div {
padding: 15px;
height: 50px;
border: 1px solid blue;
background-color: red;
}
.grid-data > div > div {
background-color: white;
height: 100%;
width: 100%;
}
What you basically want is change the grid's "gutter".
If you want this to change globally in your website, the easy solution is to change the #grid-gutter-width variable in Bootstrap's "variables.less" file and rebuild your CSS.
If you want this for one specific feature, I'd recommend not using your grid for this. Generating an alternate grid with increased gutter is probably a bit of overkill, so you could roll your own CSS. Flexbox can be very useful and successful if you're not trying to mix it in the Bootstrap grid.
Ended up wrapping the repeat's contents inside another div, and only keeping the padding on the outer.
I have this Bootstrap column structure:
.container>.row>.col-md-6*2
Problem is, that i want those two columns to have white backgrounds, but the background goes 15 pixels left and right OVER container and row.
Here is the image what I want to achieve:
Where the red rectnagles are, i want to have white background.
Here is also JsFiddle: http://jsfiddle.net/tmdnd9g5/
You can either create a custom class and apply it to those elements and set
{margin:0;}
or else apply a custom class to the .row element and set the background to white
Usually what I do is make a custom class and just add it to the element:
.col-no-pad {
padding-left: 0px;
padding-right: 0px;
}
Then add to the element's class attribute:
<div class="col-md-6 col-no-pad">
Stuff
</div>
Just apply the background to the row instead.
.row {
background-color:#fff;
margin-bottom: 100px;
}
http://jsfiddle.net/uu38zjct/
I am wondering how to accomplish this logo background found here
if you notice the logo floated to the left and how the white "D" is on a red color background that fills the entire height of the header. I know how to float it and everything, I just need to know how to make a background color with a certain width to fill the entire height of the header like so. And by the way I am assuming that there is no set height already for the header.
Thanks in advance!
Whatever id or class your floated div is for the logo, simply apply a background color to that in CSS.
If you're looking for some sort of dynamic height application; set the html, body, and enclosing div elements to all have 'height:100%'.
Posting a sample of your code would help.
You may want to try something like this (fiddle here):
HTML:
<div id="Header">
<img id="Logo" src="http://goo.gl/uDkk1X" />
</div>
CSS:
#Header {
width: 600px;
height: 60px;
background: #333333;
}
#Logo {
width: 60px;
height: 60px;
float: left;
background: #666666;
}
As you can see, the image already has transparency, so any background color set to this block would render behind the actual image. Either that or put your img inside another container with a specified background color.
How can I have div 'lower' fill the lower part of the screen with it's bg image?
Div 'upper' grows depending on the content.
The red line marks the viewport.
Here I have an example how I did it with a table : Splendid
But I want it tableless!!
Warning: This answer does not solve the original problem, I misunderstood his question. What the author wants to achieve is probably impossible with CSS only, because we have a combination of sticky footer, a footer-head that is always visible (like taskbar) and dynamic height of both the main content and the footer.
I'm leaving the snippet for anyone that might look for a sticky footer.
Fiddle: Dynamic Content with Sticky Footer
I used a timer to illustrate filling the 'Upper' Container with content constantly.
Basically you have the following HTML:
<div class="wrapper">
<div class="upper">
<span></span>
<div class="push">
</div>
</div>
<div class="lower">
Footer content goes there.
</div>
</div>
And of course, CSS:
.upper{
min-height: 100%;
height: auto !important;
width: 100%;
height: 100px;
background: blue;
margin: 0 auto -100px; /* The negative value of the footer height. */
color: white;
}
.lower, .push {
height: 100px; /* Footer and Push need to have equal height */
background: red;
color: white;
}
Code explanation:
This is basically the so called Sticky Footer concept on which you can do additional research. You have your main content, you have your footer and we use a little trick with the push container to literally push the footer so it doesn't overlap any of your content.
The extra CSS is just for the sake of the Demo, I hope you can clean it up and implement it the way you need it.
This is not precisely what you are asking for, but you could scrap the bottom div, and add the large background image to body. Apply background-position: center bottom; to make the image hug the bottom of the screen. This will work particularly well if the image has a clear background.
body {
background: url('largeImage.png') no-repeat center bottom;
}
Ummm just set the height of div 'lower'? Or even min-height if you want it to be content flexible.
You could use Javascript to subtract the height of the upper div from the browser's window height, and if the result is larger than 0, set the lower div at that height?
For getting the window size, I suggest using this function. I believe it's cross-platform, though I haven't tested it recently.
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
I have used two div tags in my blog to wrap programming codes. The first one is used to set outline box with fixed width with the following CSS class:
.outlinebox {
width: 435px;
border-width: 1px; /* sets border width on all sides */
border-style: solid;
border-color: #666666;
padding: 5px
}
The second div is used as inner box to set nowrap for codes with the class:
.nowrappercodesinner {
width: auto;
padding: 5px;
overflow: auto;
white-space:nowrap;
}
I use those div tags for my codes in my blog. They work fine until I tried to add third div as inner area with a specific background colour. For example:
<div class="outlinebox">
<div class="nowrappercodesinner">
<div class style=""background-color:#cccccc;">
...
</div>
</div>
The problem is that the background colour does not extend to the right when I move the horizontal scroll bar to the right. I am not sure if there is any way that the inner background colour will fill no matter where the scroll bar is moved.
Here I have one example in my recent blog: Zip Files with PowerShell Script. You can see the problem in the third code block.
overflow: auto;
in the innermost div might help. At least it had the desired effect when I added the property in Firebug. I find it strange, still, because I thought auto is supposed to be the default setting.
EDIT: Default value for overflow seems to be visible.
Perhaps I'm missing something, but why do you need the third div? Couldn't you just put the background color on the second div? I tried this on your blog in webkit's inspector and it displayed just fine.
<div class="outlinebox">
<div class="nowrappercodesinner" style="background-color:#cccccc;"></div>
</div>