When resizing the browser I noticed that all the elements get out of place and the website layout gets distorted. This also occurs on with low-resolution.
Is this because I have used position:relative;? How can I make the page elements not move from their position when resizing.
body{
background:url(../img/bg-silver.jpg) #F2F2F2;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:11px; line-height:18px; color:#636363;
margin-top:10%;
}
#containerHolder {
background: #eee;
padding: 5px;
position:relative;
}
#container {
background: #fff;
background:rgba(245,245,245,0.8);
border: 1px solid #ddd;
}
#main {
margin: 0 0 0 20px;
padding: 0 19px 0 0;
}
That usually only happens with floats. In any regard what you want to do is create a wrapper div with the width you want, and then just set overflow to scroll:
HTML:
<body>
<div id="wrapper">
<!-- content here -->
</div>
</body>
CSS:
#wrapper {
width:980px;
overflow-x:scroll;
}
It's impossible to tell without seeing your html code but using the css style "min-width" on your outer container (whichever element that might be) should solve the problem.
Related
I have some body and page settings that are keeping everything nicely centered in my site, which is my objective.
However, I also have some text in the center, which currently is sprawled along the entire width of the page when it's long. Every time I try to set a css width property, like max width, it decides to go haywire with it's positioning, and land itself far left of the center.
I guess there's some issue with my overall page center positioning, and setting any type of width property to a div.
EX of things nicely centered, but sprawling text: https://www.flickr.com/photos/77598212#N03/34191523510/in/dateposted-public/
and when I try to set any sort of width:
https://www.flickr.com/photos/77598212#N03/34191523450/in/dateposted-public/
I'd appreciate any and all thoughts. Thank you. -Wilson
the css:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:500px;
max-height:340px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
If you have a fixed width on a block element then simply give it margin: 0 auto; to center it.
As you can see from this image of my site:
https://www.flickr.com/photos/77598212#N03/33735427334/in/dateposted-public/
My button is crammed right underneath the randomly generated text. Instead, I'd like to lower it.
But additionally, I'm trying to keep it completely "anchored" to the page, because right now when I click the button, a random image generates, but that image is moving the button vertically depending on the size of the image. Not good.
Instead, I'd like that button to remain in the same position, always.
Any thoughts/help would be appreciated. I'm still quite new to all this. Thank you. -Wilson
link to the actual website http://www.wilsonschlamme.com/test4.html
css:
*It's pretty simple. First two elements here are controlling centering the page. The rest are self explanatory, showtext refers to the random text generator.
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:600px;
max-height:440px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}
Use:
#buttonfun {
margin-top: 20px;
}
Wrap the img with a div:
<div class="image-wrapper">
<img src="images/297.jpg" />
</div>
and add the CSS:
.image-wrapper {
height: 440px;
}
I used to have no problem with the css code i have been using. But, after I have changed from using "Lightbox2" to "fancybox", the spacing between the thumbnails and the thumbnail border (when mouse hovering above) disappeared. What has gone wrong?
Compare the problem page after switching to using fancybox (www.lixiao-art.com/test.html ) with the page using Lightbox2 ( www.lixiao-art.com/latest.html )
This is the code I use:
body { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
margin: 0px;
background-color: RGB(181,170,128);}
*{
font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal
}
#nav {float: left;
position: fixed;
background-color: RGB(233,231,197);
text-align: left;
font-size: 11px;
color: #645630;
width: 90px;
font-weight: bold;
padding: 100px 20px 100px 30px;
border: none;
min-height: 100%;
}
#content {float: left;
margin-left: 150px;
padding: 15px 20px 10px 80px;
width: 900px;
margin-top: 0px;
border: none;
font: black;
font-size: 11px;
}
#content a {text-decoration:underline}
h2 {height: 2em;}
.footer {
text-align:center;
padding-top: 50px;
padding-bottom: 1em;
font-size: 11px;
}
a{text-decoration: none;
color: #645630;}
a:hover {color: red;}
* {margin: 0;}
html, body, wrapper {height: 100%;}
.ImgBorder img { border:2px solid transparent;
height:100px;
}
.ImgBorder:hover img{ border-color: white}
.ImgBorder {display: block;
float: left;
margin: 30px 20px; }
h5{
clear:both
}
img { border: none; }
Thank you!
In your previous Lightbox2, each image is wrapped in an anchor
<a class="ImgBorder">
and the class ImgBorder has the value margin: 30px 20px
In your current Fancybox, you can just add this missing margin margin: 30px 20px to the class fancybox as each image is now wrapped in an anchor
<a class="fancybox"/>
As I just noticed that there doesn't seem to be any class fancybox already defined, you just have to add
.fancybox
{
margin: 30px 20px;
}
e.g. in your global.css
Update: In case you also want to display the border for the fancybox-images, there are two ways of achieving this: Currently you have both lightbox versions on your test page. For the first image the border is still displayed for hover. Following CSS is taking care about that:
.ImgBorder img {
border: 2px solid transparent;
height: 100px;
}
.ImgBorder:hover img {
border-color:white;
}
for an image markup as follows for your first image:
<a class="ImgBorder" rel="lightbox[gaze]"
href="http://www.lixiao-art.com/work/2014/52.jpg">
<img src="work/2014/52_t.jpg">
</a>
Your current fancybox-markup is like this for your second image:
<a href="work/2014/52.jpg" rel="group" class="fancybox">
<img src="work/2014/52_t.jpg">
</a>
So all you have to add is the border and hover for the fancybox-class:
.fancybox img {
border: 2px solid transparent;
height: 100px;
}
.fancybox:hover img {
border-color:white;
}
It's possible that there are some additional adjustments because of the CSS that fancybox uses, but it's easier if you just check this on your site as I just noticed that you're currently working on it.
At the moment your fancybox images "jump" because you added the CSS
.fancybox:hover
{
border-color:white;
margin:30px 20px;
}
which results in setting this margin on hover (therefore jumping then). I suggest you just try the CSS I posted above, that should work.
Update 2 for the comments follow-up questions:
The attributes class and rel stands for the following:
rel (='related') is an attribute containing information for you previous lightbox. The lightbox script will just fetch the information for e.g. a big image or a link from there.
class: as you noticed, almost all in your css-file starts with a dot (.) followed by a name. This name is the name of the class to which the style information will apply. So .test {color:red;} results in displaying a text red in case it's wrapped in an element with the class test, e.g. a <div>: <div class="test">This is red text</div>.
Update for the margins:
To keep the margins to your images when you remove it for the :hover - the correct way to have the margins is just like that:
.fancybox img
{
margin:30px 20px;
}
As you already have one .fancybox img in your CSS, just add this margin to it, though you can also have these selectors multiple times in a CSS file, it's better to keep the styles applying to an element together.
Thank you very much! You've pointed out the problem with my multiple classes, and I've fixed it accordingly like this:
<a class="fancybox ImgBorder" rel="group" href="work/2014/52.jpg"">
<img src="work/2014/52_t.jpg">
</a>
(instead of making new definitions in my global.css)
But, a small problem shows up: this line shows in red colour in the editor at the backoffice. Is there a problem with this line? but I guess I will open a new thread for this.
Thanks again!
How do I expand the length of a border past the length of my text? This is what I have so far:
color: #8C4600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
border-bottom: 1px solid #D1D1D1;
This is the HTML: <li class = "vendors">VENDORS</li>
Use padding and negative margins.
E.g.:
div {
padding: 1em;
margin: 0 -1em;
border-bottom: 1px solid red;
}
The above gives padding on all sides, and negative 1em margin on left and right. You may wish to fiddle w/ that.
CSS borders are placed between the margins and padding of an HTML element. If you want the borders of an HTML element to extend past the width (or height) of that element, you can add CSS padding to the element in order to push the borders outward.
For example, if your html is <li class=vendors">VENDORS</li> adding padding:0 10px; to your CSS would push the borders outwards on the right and left by 10px.
.inner {
width: 80%;
}
.outer {
border-bottom: 1px solid #D1D1D1;
color: #8C4600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
}
<div class="outer">
<p class="inner">Your text</p>
</div>
You will probably need to set the outer width though. As it might not auto-scale correctly in each browser. Or just make outer 120%, and inner a fixed width. This should be possible in multiple approaches.
Just expand your border to the vw instead of its parent element.
Here is what I mean:
.vendors {
width: 100vw;
border-bottom: 1px solid hsla(0, 0%, 0%, 1);
}
<li class="vendors">VENDORS</li>
You have to specify "border: ##px color; in css.
This will create a border around the related html tag.
A sample code is:
<!DOCTYPE html>
<html>
<head>
<style>
p {
width:225px;
border-style:solid;
border:2px solid red;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
By default, without the width and border-style, the border will occupy 100% of the space. You can restrict its width and style in any way you want.
Here's a link To a website that will help you the most.
I am totally a beginner at CSS layouts, but I am trying to just start a basic one that is simply a 'fixed width' center column (just one div), so that the sides are flexible. I know this is not responsive/reactive, but I am just starting.
So I have tried googling tons of examples, but I can't find a starting point that works on both FF and IE9? I mean just getting started and they are different??
Here is latest example of simple style I tried:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #f5f5f5;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#content {
width: 900px;
color: #333;
border: 0px solid #f5f5f5;
background: white;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 600px;
}
so this is the very beginning but already FF shows this aligned to the center and IE doesn't. So already everything I try (i.e. left:50% and margin-right:-461px, as an example I found) affects these differently. I read all over the place this is a very common challege, but I fear there is some foundation logic here that I am unaware of?
any help with this is greatly appreciated!
EDIT: Thanks for the comment! I do have the following, which again works in IE (and in chrome) but not FF?
css:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #f5f5f5;
}
#wrapper {
margin: 0 auto;
width: 922px;
margin-left:auto;
margin-right:auto;
}
#content {
width: 900px;
color: #333;
border: 2px solid #f5f5f5;
background: white;
padding: 10px;
height: 600px;
position:absolute;
left:50%;
margin-left:-461px;
}
#welcomeBanner{
text-align:center;
font-family:"segoe ui light","segoe ui","segoe";
font-size:18pt;
padding-top:20px;
padding-bottom:20px;
margin-top:0px;
}
html: is literally only:
<div id="wrapper">
<div id="content">
<div id="welcomeBanner">Attempting to Learn This Stuff<div>
</div>
</div>
so in IE9 and Chrome I get the title in the center, big box center fixed with back ground color, etc. In FF nothing. I like there is not style applied to the page at all? I am using a link tag in the head, but it is obviously there and working for the others?
body {
width:100%
}
div {
width: 900px;
margin:0 auto;
}
should work
cf Centering a Div in IE9 Using margin:auto