I am new to learning web design ,
please take a look at > this images
here I want to wrap a content in a 960px width ( red box )
but I want that every content / section is having a different background color ( just for example ) but the background width is exceed the wrapper , or maybe full width / 100%
how can I do this ?
thanks
EDIT :
just for example the site that doing something like this is IMAGESHACK the background color is full width of the screen but the content still wrap to main wrapper
You will need a container with the width of 960px:
<div class="lightGray">
<div class="container" style="width:960px">Content</div>
</div>
<div class="medGray">
<div class="container" style="width:960px">Content</div>
</div>
<div class="darkGray">
<div class="container" style="width:960px">Content</div>
</div>
This will allow the colors to expand all the way across the screen, as well as expand as content expands. I would, of course, stray away from inline styling. Just make a class called container:
.container {width: 960px;}
You are looking for the CSS property overflow.
Here is an example: http://www.w3schools.com/cssref/pr_pos_overflow.asp
And here is the summary: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Do you know about div ? They are very useful for this kind of things!
Related
I got the following constellation of <div>-elements:
<div class="root">
<div class="mainContainer">
<div class="menuBarContainer"></div>
<div class="appBoxContainer"></div>
</div>
<div class="sidebarContainer"></div>
</div>
Now, I want them to arrange on my page as depicted in the follwing picture:
Which would be the best way to arrange the <div> in CSS?
My problem is that the boxes try to fit in one line, even if I set the width-attribute to 100%.
I want the site to be fully responsive and the sidebarContainer-element is linked to a button which toggles its visibility.
What can I do to make the mainContainer-element take the full width of the page (root) when the sidebar is invisible (width: 0)?
Thanks in advance!
Look into flexboxes, they're practically made for this desktop-application like layout.
Row direction for for .root, column direction for .mainContainer
For responsive design you can use media queries to hide the .sidebarContainer below a certain screen size, even depending on device orientation.
Or simply change the root flexbox to column direction to display it below the main content.
If you set (blue) boxes to display:block they should clear automatically both sides and get positioned like your sketch;
Then , assuming your sidebar has a variable width you could set
.mainContainer {width: auto; display:inline-block}
trying to change bootstrap panel height's to be equal the body height's
so to be like side bar :
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<div class="panel panel-primary ">
<div class="panel-heading">Welcome User!</div>
<div class="panel-body client-left-side">
Cpanel Menu
</div>
<div class="panel-footer">Logout Button</div>
</div>
</div>
</div>
</div>
result :
I want to stretch it , so it's height from the end of the navigation bartill the beginning of the footer...
EDIT: link to the test page
I like this, personally:
.panel-primary {
height: calc(100vh - 145px);
}
Two points
1) Bootstrap-3 doesnot let you play with height easily. If you want to play with height then you have to go for table structure where you can set the row-span of each columns, BUT this is NOT a good approach.
2) The other way (easy) is that to use jquery for this. All you need to do is to get the height of #body and set the height of panel to #body's height. You might some media queries here too.
If you want to set the heights to 100% you should give your enclosing div's the proper height as well. I am guessing your col,row and container are not the full height till the footer.
If you could provide the URL, its easier to see and provide you with a concrete answer.
I think you want to increase the panel-body height, not the entire panel. One way to do this is to use CSS flexbox and make sure any of the panels containers are 100% height (including the html and body)
http://www.bootply.com/BZQYq01ABC
I've been trying a few techniques, but I'm getting stuck on this problem. I want to do the whole 100% height columns within a section thing, but one column has an image which needs to scale to fill one column.
So I have one column of text (variable content from WordPress) that is 66% wide and one column that holds an image and is 33% wide. The image can be on the left or the right based on a class.
My HTML:
<section class="page-section color-brand left-image image-third">
<div class="page-section-mid-wrapper">
<div class="image-wrapper left-image image-third">
<img src="img.jpg" alt="">
</div>
<div class="page-section-wrapper">
<div class="page-section-content">
Variable content here
</div>
</div>
</div>
</section>
Most of the CSS techniques do tricks to get a solid background color in both columns. But in this case, I want a scaled image. I'm willing to switch from an img tag to an inline style="background-image" to get the scaling to work, but either way, I'm having trouble getting the column heights to match.
The closest solution was to use display:table, but I don't like that I can't change which side the image is on without changing the HTML. With my current float based design, I can swap the image placement with just a different class (the left-image above for example).
With just floats, here is an example of what I have so far: http://jsfiddle.net/no80ayc2/2/
You'll notice that when the view is narrow, the image is shorter than the overall container height.
I've read something about using relative/absolute positioning, but the only way I could get that to work was with a fixed height for the container. That won't work for me: http://jsfiddle.net/qLa4g7fL/1/
EDIT: To clarify, I want the image to fill the entire space (33% width by 100% height). And I expect it to get cropped as necessary.
Here is an example of how that should look (just a quick idea)
change min-width: 100% into max-width:100% in .page-section.image-third .image-wrapper img
Then your image-wrapper may not have the full height but will stop your image to overflow.
You need to change your min-width to max-width,
Try to look at this link, I just update your code
http://jsfiddle.net/no80ayc2/7/
There's a new amazing css property called object-fit!
https://css-tricks.com/almanac/properties/o/object-fit/
You'll fall in love!
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/
I've got this layout that i want to cut into html/css, but i'm struggling with picking best way to strcture html/css for major content (like diffrent bg block in the middle that is under 960 content block, and covers whole wideness etc.). I've attached a structure of the layout:
So my main quesions are:
How to handle custom bg block that is ,,outside'' of grid, or should
it be inside, and then make content block be inside contenbg, and
outside the container, that logo and menu is?
How to handle custom png shadows (i wanna avoid css3 in this case) that should be outside the content
slider (as on image)
Same question applies to footer, should it be outside the main 960
container? Should i use ,,main container'' at all in this case? I'm
not sure whats the best practise here.
Thanks
I'm unable to see the attached file but I'll try to give you some guidelines:
You should have a main content which is centred on the screen and is 960px wide.
If the header/footer are the same width (i.e. their Background doesn't span more than 960px), they should be in the container div. On the other hand, if their BG is wider than 960 put each in a separate div which spans as wide as you need and inside this div put another div which is 960 wide and centered.
example:
<div id="headerWrapper">
<div id="header">...</div>
</div>
<div id="content">...</div>
<div id="footerWrapper">
<div id="footer">...</div>
</div>
if you want png shadows without using CSS3 your only option is slicing the image with the shadow.
I hope that answers your questions.