I am working on this project: http://www.e-pedkelnes.beta.verskis.lt/
Actually what I have to do is to put a background without adding a class. The background has to be white with extensions for the menu and the footer element. It would be easy if it would be only an extension for the menu. Content is of different size and size depends on the elements in the screen. so, it is easy to put a background for the menu, but footer background will always be in a different position just because of the different sizing of the content. If you understood what I mean :), I would be grateful to get some help.
Within:
.foot-outer {
background: none repeat scroll 0 0 #E8E4E5;
border-top: medium none !important;
left: 2px;
padding-top: 15px;
}
I removed width and margin and that looked better. You should not have them set on the outer elements, only on the container elements.
Does that make sense?
EDIT:
Your HTML layout should be more like
<div class='header wrapper'>
<div class='header'>
</div>
</div>
<div class='content wrapper'>
<div class='content'>
</div>
</div>
<div class='footer wrapper'>
<div class='footer'>
</div>
</div>
Then apply backgrounds to the wrapper divs, and apply a centred width to the inner content divs.
Related
I am displaying three div's side by side, they look well at normal screen size but on zooming screen as the div shrinks text inside it also shrinks and images seem to be cut (size of image is being cut on further zoom). Bottom line I don't want content inside divs messed up on zooming, tried overflow: scroll for body but on zooming no scroll bar appears. I think scroll bar would help in keeping the content inside div safe.
jsfiddle this will help you understand
<div id='container' style='width:100%;'>
<div class='left' style='height:20px;width:21%;float:left;border:1px solid black;box-sizing: border-box;height:200px;'>
</div>
<div class='center' style='height:20px;width:56%;float:left;border:1px solid blue;box-sizing: border-box;height:200px;'>
</div>
<div class='right' style='height:20px;width:23%;float:right;border:1px solid red;box-sizing: border-box;height:200px;'>
</div>
</div>
When using % in width be carefull because the border, margin, padding all counts to the width calculation, thats probably why your code fails.
To make it work you can use box-sizing: border-box; in your divs take a look:
<div id='container' style='width:100%;'>
<div class='left' style='width:21%;float:left;box-sizing: border-box;'>
</div>
<div class='center' style='width:56%;display:inline-block;box-sizing: border-box;'>
</div>
<div class='right' style='width:23%;float:right;box-sizing: border-box;'>
</div>
</div>
Take a look at this fiddle fully working http://jsfiddle.net/0heq8dz3/
I have a container that holds an image, some text and a footer
The image is situated at the top with the text underneath, followed by a footer that simply contains some additional metadata
I want to be able to hover over the content (Excluding the footer) and for it to all highlight
The issue I have is that I cannot make the "text" div span all the way to the bottom where the absolute positioned footer begins.
The footer will highlight on hover independently. I don't want the content hover to effect the footer and I don't want the footer hover to effect the content hover
Here's a codepen link to an example which shows that the blue highlight only covers to the bottom of the text, opposed to the entire panel up until the metadata footer http://codepen.io/anon/pen/bVNeqr
An assistance or guidance here would be greatly appreciated.
HTML
<div class="item">
<div class="content">
<div class="image">
<img src="http://lorempixel.com/output/city-q-c-300-200-4.jpg"/>
</div>
<div class="text"> Text here </div>
</div>
<div class="footer"> Footer </div>
</div>
Insted of position:absolute you can use css3 "flex" property to solve this problem. Try to add this to your code.
.item {
display:flex;
flex-direction:column;
}
.content {
flex-grow:1;
}
Here's an example
Something like this?
I just added some plain CSS stuff and it seems to work fine.
http://codepen.io/KingK/pen/bVNeoo/
.text
{ height: auto; }
I have a <div> positioning issue on single-page web design. To be more specific — I can't find a way to fill the background properly, using the <div>s.
For some reason, the <div>s won't fill the background as I want — the background always stays visible (on left/right and top/bottom sides of the <div>s).
What I'm trying to achieve:
My entire page is a single-page website. The page is composed of 5 rectangle <div>s, "touching" each other in a vertical fashion (0 pixels of background between them). I don't want the background to be visible at any part of the page.
I want the top <div> to fill the upper part of the screen ("touch" the browser's upper menu) and the right/left sides.
I want each one of the 3 middle <div>s to "touch" the left and right sides of the screen (and of course touch the two <div>s above and below, without any space between them [no background seen]).
I want the bottom <div> to fill the lower part of the screen ("touch" the browser's lower menu) and the right/left sides.
I've tried to change the position value on the CSS part. The outcome was always a "twisted" version of the page.
My HTML code:
<div id="page1" align="center">
<a id="about"></a>
</div>
<div id="page2">
<a id="portfolio"></a>
</div>
<div id="page3">
<a id="Dream"></a>
</div>
<div id="page4">
<a id="contact"></a>
</div>
<div id="page5">
<a id="Love"></a>
</div>
My CSS code:
#page1{
height : 1000px;
background-color: #4c3719;
}
#page2{
height : 1000px;
background-color: #9a8479;
}
#page3{
height : 1000px;
background-color: #ddbad8;
}
#page4{
height : 1000px;
background-color: #ddd28d;
}
#page5{
height : 1000px;
background-color: #ed9aa9;
}
Write before all CSS code this
* {
margin:0;
padding:0
}
If I correctly understand this may help
I have two divs on a page with the same height position. I'm trying to make them expandable, allot like what goes on in the WordPress dashboard area:
Now i've got the left div to expand but only with the right div staying at the same width. I need both to expand on zooming in and out.
any ideas how this is done?
I've been looking it up for the past hour but i cant find anything.
A link to a tutorial would be cool (good luck finding one).
EDIT:
Here guys, i found something similar: http://jsfiddle.net/Khez/2zLPF/embedded/result/
do you see how the two divs side by side expand? the green and blue ones...
If you want your divs to dynamically change depending on the width of their container, set the widths using percentages:
HTML:
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
CSS:
.column {
float: left;
width: 50%; }
.column div { margin: 0 20px; /* Set the spacing between the cells */ }
Preview: http://jsfiddle.net/Wexcode/F7h2C/
NOTE: Because you are setting the combined widths of the columns to 100%, you cannot add padding to .column if you want them to be on the same line. The inner div wrapper will allow you to add spacing between your two columns. You should apply all background attributes to .wrapper.
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):