On the website I'm currently fixing there are two divs displayed Inline.
On resizing the browser window, the div on the right automatically aligns to fit under the first div instead of staying inline. My question is on how to prevent this resize and to keep it standard on all screen sizes.
To display this issue, I've attached two screenshots.
Another issue: The screen is vertically scrollable which should not be the case as the height of html, body or any of the div are not more than 100%
My CSS for the two main divs is as follows:
#menu{
position:absolute;
width:15%;
height:600px;
float:left;
margin-top: 10px;
margin-left: 40px;
}
#content{
position: absolute;
height:600px;
width:73%;
float:left;
margin-top: 10px;
margin-left: 290px;
}
The CSS for the inner 4 divs are as follows
.gallery-image-rest{
background: url('../images/thumbs/rest.jpg');
position: relative;
height:600px;
width:24%;
float: left;
margin-left: 15px;
/*display: inline-block;*/
text-align: center;
}
.gallery-image-replenish{
background: url('../images/thumbs/Replenish.jpg');
position: relative;
height:600px;
width:24%;
float: left;
margin-left:3px;
/*display: inline-block;*/
text-align: center;
}
.gallery-image-rejuvenate{
background: url('../images/thumbs/Rejuvenate.jpg');
position: relative;
height:600px;
width:24%;
float: left;
margin-left:3px;
/*display: inline-block;*/
text-align: center;
}
.gallery-image-reunite{
background: url('../images/thumbs/reunite.jpg');
position: relative;
height:600px;
width:24%;
float:left;
margin-left:3px;
/*display: inline-block;*/
text-align: center;
}
The code has a lot of redundancies but that is second priority as the client needs the display to be correct before anything else.
Thanks guys.
Specifying a min-width to your <body> element will prevent auto-resizing.
body {
min-width: 1280px; // change width as needed to fit your page
}
Restricting the size to a fixed proportions because you want to keep the text inside some boxes makes the site more difficult for some people to use. I have my browser set at 125% zoom by default, so that I can, with some difficultly, read the text on most sites that I visit. Ideally I'd like it to be bigger but so many sites don't take this into account and the sites become unusable. The fact that there are people with poor eyesight, or just older people who find it harder to read small text these days never seem to occur to them. They can read it so everything is right with the world.
I would suggest that if you do alter your design that you use percentages for your width of your content and you should also use percentages for your margins / padding, rather than fixed PX values. That way your site would have held its general layout and the text would have zoomed making easier to read, for people like myself.
#menu{
position:absolute;
width:15%;
height:600px;
float:left;
margin-top: 1%;
margin-left: 0.5000%;
}
#content{
position: absolute;
height:600px;
width:73%;
float:left;
margin-top: 1%;
margin-left: 16%;
}
And for each of your inner divs change all the margin-left:3px; to
margin-left:0.5000%;
Related
Hello using a child theme, getting all the other elements working with the responsive design - just not the logo?
link to site
Using this code at the moment;
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
margin-left: 390px;
}
Many thanks
These two lines
display: block;
margin: 0 auto;
are a good place to start to center something.
Common reasons for that not to work is if the element is floating or has its position set to something besides static. In those cases you can try float: none;, or position: static; or position: relative;. In the case of relative be sure to also set the relevant top, bottom, left, and right properties.
There are a many cases where none of these things will help, but in your case and in most simple cases, the above will get you there.
Try this for your CSS
header#masthead hgroup .logo {
display: block;
float: left;
max-width: 100%;
position: relative;
left: 50%;
margin-left: -150px;
}
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
}
No need for big margin-left. the code on the .logo div moves the logo 50% across the screen, to center it completely, you then have to remove half the width with a margin-left: -150px.
I tried the code out on your website so it should work. Hope it makes sense.
I am trying to find a neat way to get my header to have a width of 100% (so I can use a background colour that spreads across the whole page), but also within it I have two images, that I'd like to stay inline and not overflow on each other or push each other down.
I currently have the follow CSS:
header {
width: 100%;
height: 150px;
padding: 50px 50px 10px 50px;
clear: both;
background: #185f96;}
#logo {
float: left;
width: 800px;}
#phone { float: left; width: 200px; }
Logo and phone are inside the header. If you look at it in action (removed) you can see if you size it down to a certain point, the phone info gets pushed under the banner. I can set it to a static width, but then this is an issue with different web sizes.
I created an extra div inside the header in which I just put the logo, and left the phone on the outside. This gives me the results I want, but I want wondering if there was a neater way of achieving this without the extra div.
(Also sorry for the formatting of the code section, I have trouble getting it to be neatly formatted. Doesn't seem to work properly)
Reduce your page with and use % unit in padding too as.
header {
width: 84%;
height: 150px;
padding: 5% 5% 1% 5%;
clear: both;
background: #185f96;}
#logo {
float: left;
width: 800px;}
Set width is percentage and then add white-space:nowrap; to header to prevent things from to a new line
header {
width: 100%;
height: 150px;
padding: 50px 50px 10px 50px;
clear: both;
background: #185f96;
white-space:nowrap; /*added*/
}
#logo {
float: left;
display:inline-block; /* or width in percentage */
}
#phone {
float: left;
min-width: 20%; /* ammended */
}
It regularly occurs that I want to center a css box inside another one both vertically and horizontally. What's the simplest way to do so that satisfies the following constraints?
The box should be precisely centered, not approximately.
The technique should work in modern browsers and in IE versions back to 8
The technique should not depend on explicitly knowing the width or height of either the centered content or the containing box.
I generally know the container is larger than the content, but supporting larger content (which then overflows symmetrically) would be nice...
The underlying content of the container must still be able to respond to clicks and hovers except where obscured by the centered content
I currently use 4 (!) nested divs to achieve this, with css along the following lines:
.centering-1 {
position:absolute;
top:0; left:0; right:0; bottom:0;
text-align:center;
visibility:hidden;
}
.centering-2 {
height:100%;
display:inline-table;
}
.centering-3 {
display:table-cell;
vertical-align:middle;
}
.centering-content {
visibility:visible;
}
You can see this in action as a jsbin snippet.
However, this approach, while workable, feels like extreme overkill due to the large number of wrapper divs, and it doesn't work with content that's larger than the container. How can I center things in CSS?
Horizontal centering is easy:
.inner {
width: 70%; /* Anything less than 100% */
margin-left: auto;
margin-right: auto;
}
But vertical centering is a little tricky. The best technique for modern browsers is to combine inline-block and a pseudo elements. This originates from "Ghost element", the last technique at http://css-tricks.com/centering-in-the-unknown/. It sets adds a pseudo-element and uses inline-block styles get the centering.
The CSS:
.outer {
height: 10rem;
text-align: center;
outline: dotted black 1px;
}
.outer:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
width: 10rem;
display: inline-block;
vertical-align: middle;
outline: solid black 1px;
}
An example on Codepen: http://codepen.io/KatieK2/pen/ucwgi
For simpler cases, the following may be good options:
For single lines of content, you can do a quick and dirty vertical centering job on the text within an element by using line-height larger than your font-size:
.inner {
border: 1px solid #666;
line-height: 200%;
}
The solution with widest support is to use a non-semantic table. This works with very old versions of IE and doesn't require JavaScript:
td.inner {
vertical-align: middle;
}
And here is simple solution for known height elements (which could be in ems, not px):
.outer {
position:relative;
}
.inner {
position: absolute;
top:50%;
height:4em;
margin-top:-2em;
width: 50%; left: 25%;
}
You can get by with 2 fewer elements. Anything less than this is going to require things that IE8 (and IE9) doesn't support.
http://cssdeck.com/labs/0ltap96z
<div class="centering-1">
<div class="centering-2">
<div class="intrinsically-sized-box">
<p>You can put any content here too and the box will auto-size.</p>
</div>
</div>
</div>
CSS:
body {max-width:750px;}
.generalblock {
margin-top:2em;
position:relative;
padding:10px;
border:20px solid cyan;
font-size: 18px;
}
.centering-1 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
text-align:center;
visibility:hidden;
display: table;
width: 100%;
}
.centering-2 {
display:table-cell;
vertical-align:middle;
}
.intrinsically-sized-box {
visibility:visible;
max-width:300px;
margin: 0 auto;
background: yellow;
position:relative;
border:1px solid black;
}
I've come across a very peculiar situation and I'm not sure what is happening.
I'm trying to arrange my web page so that you have a collection of same sized images all squished together in a grid sort of pattern- these images will be links to articles.
For my images each has the code:
<div class="linkyimage">
<img src="image/lblue.png" alt"blue" />
<p class="description">
Oy oy oy
</p>
</div>
And my css:
.description{
background-color:#000;
position: absolute;
color:#fff;
opacity:0;
top:150px;
left:10px;
}
.linkyimage{
position: relative;
display: inline;
float: left;
height: 250px;
width: 250px;
margin:0px;
white-space:nowrap;
overflow:hidden;
}
.linkyimage:hover img{
opacity:0.5;
}
.linkyimage:hover .description{
opacity: 1;
}
But this doesn't work. It seems to squish the images down and put them in containers that are 250px squared, the effect is really rather bizzare, however the descriptions display perfectly.
So I had an idea. Maybe I just format them as images.
I change it to
.linkyimage img{
blah blah
}
This makes my images display perfectly....but now the descriptions display off on the far left of the screen rather than over the images like they used to.
Can anyone explain what is actually happening here? How does merely formatting the images of linky image (thats all the boxes contain) mess up the formatting of the box?
Why do the images get compressed and not fill the entire box if I only format their container and not the images?
All rather peculiar.
Edit:
With linky image left open:
http://jsfiddle.net/28n9p/
With just linky image's images handled:
http://jsfiddle.net/XJq5W/
So you can see this jsFiddle
.description{
background-color:#000;
color:#fff;
height:30px;
opacity:0;
position: absolute;
margin-top: 120px;
}
.linkyimage img{
position: relative;
display: inline;
float: left;
height: 150px;
width: 150px;
margin:0px;
white-space:nowrap;
overflow:hidden;
}
and add this class to your divs..
.linkyimage{
margin-right:5px; // optional
border: 2px solid #000; //optional
float:left;
}
I'm back with more questions!
It's likely something very simple, but it has confused the hell out of me. I have a layout set-up so that the H2 text on pages and posts (Wordpress) has a background image next to it on both sides, accomplished by use of span:before and span:after.
Here is how it is working correctly and what I would like the overall CSS to achieve:
http://www.weburton.co.uk/content/demo/?page_id=121
This is currently achieved by min and max-widths in the CSS. And I've had the width part set to auto, where it is under a parent element with the width of the page. I don't understand how the lines aren't automatically resizing based on the H2's width. See, the problem here:
http://www.weburton.co.uk/content/demo/?p=36
Here is the CSS that is used:
#pagewrapper{
width: 960px;
margin: 0 auto;
position: relative;
padding-top: 140px;
text-transform: uppercase;
}
h2 span:before{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll left center transparent;content:" ";height:1px;margin-right:15px; left: 0%; position:absolute; margin-top: 15px; min-width: 25%; max-width: 50%; width: auto; }
h2 span:after{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll right center transparent;content:" ";height:1px; margin-left:15px; right: 0%; position:absolute; min-width: 25%; max-width: 50%; width: auto; margin-top: 15px; }
Basically, I've exhausted all options that I can think of. Is there something I'm missing here or is there another way to go about achieving this styling using something else but span that is easier?
Oh and I know I have some redundant styling calls, I'm in the process of cleaning it up. :)
Thanks in advance! :)
May be that is what you want
Remove min-width and max-width from h2 span:before and h2 span:after
h2 span {
position:relative;
}
h2 span:before {
left: -25%;
width: 20%;
}
h2 span:after {
right: -25%;
width: 20%;
}
without a fiddle it's hard to give you a definite answer, but I think that if you try changing the display property to display: inline-block it should do the trick.
This will cause the element to act as a block element while still being displayed inline (thus preserving your current layout - block elements typically take up the full available width and are followed by linebreaks).