I am trying to have the main container of my site to center automatically when the explorer window is bigger, or to stick to the left whenever the explorer window is narrowed.
How would I achieve that with CSS?
Most sites do it nowadays, bloomingdales.com for example.
When you make your browser smaller, the main container stays on the left, and as soon as you open your browser on the right side, the main container automatically gets centered.
Thanks!
My site: www.tahara.es
ADDING CSS:
body {
margin: 0 auto;
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
.mainContainer
{
position: absolute;
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}
body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
.mainContainer
{
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}
This should do it:
body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
.mainContainer {
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}
View on JSFiddle
The key is that there is no position: absolute; on your div. That property removes the element from the normal document flow, such that it has no parent element. margin: 0 auto; determines the left and right margins from the parent element. Putting two and two together, you can see that they're incompatible.
Related
I am adding a section/block to my website. The font overlay does not look good with all background pictures. Sometimes it is hard to read the text. A slight blur will fix my issue. However, with my current code and all the variations I have tried, it applies to blur way above the text size. If I apply blur to just the text areas it does not make a perfect "square" and leaves the empty areas the original background color. Sort of a highlighter effect.
How do I make it so that it blurs only the box of text as a whole? I have been trying to get something that looks like what this guy has done: https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
My CSS code is:
* {
box-sizing: border-box;
}
beody {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
esction {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://s15.postimg.cc/999tzxuqz/test_banner.jpg");
background-repeat:no-repeat;
background-size:cover;}
section:nth-of-type(2n) {
background-color: #FE4B74;
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
}
.einto {
height: 50vh;
}
.econten {
display: table-cell;
vertical-align: middle;
background: rgb(34,34,34); /* for IE */
background: rgba(34,34,34,0.75);
}
eh1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
ep {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
ea {
font-weight: 700;
color: #373B44;
position: relative;
e&:hover{
opacity: 0.8;
}
Here is what is happening when I apply it as is:
https://postimg.cc/image/471owh7w7/
Your black <div> should have position: absolute, and you should in style use blur for it.
Inside that <div> will be another <div> with your text (content) and it should have position: relative and with a z-index that has a greater value than the black <div>.
In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
I have an infoBubble with some text and images. The right aligned image (arrow) is pushed down in Firefox (Mac) but not Safari or Opera dependent on the length of the text to the left and above. See the marker over Australia: http://www.hostelbars.com/map_test_v3_3.html
Here's the css:
.infowindow {
background-color: #000;
color: #FFF;
font-size: 18px;
font-family: Helvetica Neue, Helvetica, Arial;
text-shadow: 0 -1px 0 #000;
font-weight: bold;
position: relative;
overflow: hidden;
}
.infowindow .iwPhoto {
background-color: #F00;
position: relative;
padding-bottom: 1px;
padding-top: 2px;
padding-left: 5px;
}
.infowindow .iwName {
background-color: #0F3;
line-height: 33px;
white-space: nowrap;
position: relative;
margin-left: 115px;
margin-top: -70px;
padding-right: 5px;
padding-top: 2px;
}
.infowindow .iwCity {
background-color: #C03;
line-height: 32px;
margin-left: 115px;
padding-bottom: 1px;
}
.infowindow .iwCity .iwArrow {
background-color: #0CF;
padding-right: 5px;
padding-left: 5px;
margin-top: 3px;
float: right;
}
Aside from the images I don't want the div's to have a fixed width. Would appreciate some help.
Brendon
Seems to only happen the first time, and for items with city values longer than name values. This suggests you didn't set width and height values for your img element (arrow.png), so the first time it has no idea what size it's going to be, and subsequent times it does.
What you should probably do is change it to a background image, as it's merely an iconified decorative image meaning 'next' or 'more', and thus should be in CSS's realm of style, not HTML's realm of meaning (where 'img' lives). See this list of image replacement techniques.
Otherwise, you could just apply img[src$="arrow.png"] { width: 29px; height: 29px; }, or add width and height attributes to the img element.
On this page I'm trying to position quote images around the block quote but they won't sit right.
This is the CSS:
blockquote {
padding-left:10px;
color:#444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
padding: 0 100px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.
Any ideas would be welcomed. Thanks - Tara
Two things:
In order to see the images behind
the text you should not specify a
background color for the inner paragraph; make
it transparent instead.
The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)
The css:
blockquote {
padding-left: 10px;
color: #444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
.entry blockquote p {
padding: 0 100px;
background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
Try adding this property:
.entry p {
margin: 5px 5px 5px 15px;
padding: 0px 40px 0px 0px;
line-height: 20px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}
I managed to get the following:
Hope that helped (:
Depending on the browser support that you need, you can try it without images, using CSS:
blockquote {
padding: 0;
margin: 0;
border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 0;
height: 0;
vertical-align: -0.5em;
display: inline-block;
}
blockquote:after {
content: "”";
margin-left: 0.05em;
}
blockquote:before {
content: "“";
margin-right: 0.05em;
margin-bottom: -0.5em;
}
Live example here
(Tested on Firefox and Chrome only)
When viewing my site in IE, the site description looks as if the bottom of the letters are cut off. Of course, everything is fine and looks nice in Safari/Firefox/Chrome, but IE is killing me. It has been made on the WordPress Twenty Ten theme.
I adjusted the margins and padding with no luck. It seems that reducing the font size helps, but it can't be much smaller or it will be unreadable.
Any help would be much appreciated.
Thanks!
Alex
Here is the page rendered in Safari and IE side by side: http://screencast.com/t/b4YnDKANsg91
Here is the header code:
/* =Header
-------------------------------------------------------------- */
#header {
padding: 15px 0 0 0;
}
#site-title {
float: left;
font-size: 30px;
line-height: 36px;
margin: 0 0 4px 0;
width: 300px;
}
#site-title a {
color: #000;
font-weight: bold;
text-decoration: none;
}
#site-description {
clear: right;
float: right;
color: #006400;
font-size: 23px;
font-style: regular;
margin: 45px 0 10px 0;
width: 610px;
}
/* This is the custom header image */
#branding img {
border:none;
clear: both;
display: block;
}
/* This is the search form in the header */
#searchform {
float: right;
margin-top: -30px;
z-index: 500;
}
I can't be certain without seeing the full CSS, but I suspect a overflow:visible would solve this. Another selector may be setting it to clipped or hidden... If that doesn't work, try setting the height to em units instead of pixels (2em, for example).