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;
}
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.
I've made two divs for navigation with given css:
for first button:
.OptionsButton .DropDownButtonOverlay
{
margin: 0px -95px 0px 0px;
width: 92px;
height: 38.5px;
float: right;
z-index: 2;
}
.tenPxLeft
{
margin-left: 10px;
}
.floatRight
{
float: right;
}
.regularButton
{
background-color: #008BE1;
border: none;
}
.optionsButton
{
border-radius: 3px;
-webkit-appearance: none;
}
and the second button is as this:
.defaultButton
{
font-family: 'Open Sans', Segoe UI, Verdana, Helvetica, Sans-Serif;
border-radius: 3px;
font-size: 14px;
color: #FFFFFF;
padding: 10px 15px;
-webkit-appearance: none;
margin: 0; /* fixes chrome bug */
}
.tenPxLeft
{
margin-left: 10px;
}
.floatRight
{
float: right;
}
.regularButton
{
background-color: #008BE1;
border: none;
}
the problem I am dealing with is they look fine on Chrome and IE (alligned nicely). However when I go to firefox they don't get alligned as well as intended (i am putting them in another div as a top menu thingy).
It seems like the font is influencing that. I've tried making font by percentage (100.01%), however it makes it look nice in firefox, but then ruins the view in IE and Chrome.
how could I fix this?
I found out that firefox tends to work differently on divs (I knew this before, but the solution was unclear), therefore I added Max-Height attribute on the button that expands due to text-size in it's body which fixed the problem.
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!
Maybe I am trying to much but What I want to do is to put the post title above the featured image on my page. I got it to work by possitioning the text, but of course this stops my page from being a responsive page.
What I am looking for is to have text with a background colour of a certain width (so not spread from left to right) to be automatically centered and in absolute position.
Is this possible?
This is what I have until now:
<style>
.post_title
{
font-family: sans-serif;
font-size: 14px;
color: #fff;
text-align:center;
position: absolute;
background-color: #0E0EFF;
display:table;
margin:auto;
width: 40%;
padding: 3px;
border-radius: 2px;
}
</style>
Any help would be highly appreciated, I have been looking for the answer for hours now.
Thx!
I'm not sure if I understand your question right, but you can try to put a wrapper around the .post_title, let's say div class="titlewrapper"
Apply styles something like this:
div.titlewrapper {
width:100%;
text-align:center;
}
div.titlewrapper .post_title {
font-family: sans-serif;
font-size: 14px;
color: #fff;
width:auto;
background-color: #0E0EFF;
display:inline-block;
margin:auto;
padding: 3px;
border-radius: 2px;
}
Does this answer your question?
Groet, Jeroen
Could THIS work for you?
CSS:
.center_title {
margin-left:auto;
margin-right:auto;
}
.post_title {
font-family: sans-serif;
font-size: 14px;
color: #fff;
text-align:center;
background-color: #0E0EFF;
display:table;
margin:auto;
width: 40%;
padding: 3px;
border-radius: 2px;
}
HTML
<div class="center_title">
<div class="post_title">test</div>
</div>
Try not to use Positions, only if you really need to!
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