I've been working on building a website for a while now (scarletorigami.com, if it helps). I've written some PHP which generates lists of captioned thumbnail links to individual pages, which have the following structure:
#thumbnails {
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 60px;
width: 680px;
background-color: #BBCCBB;
}
#thumb {
margin: 0;
padding: 0;
width: 220px;
height: 280px;
background-color: #BBBBBB;
text-align: center;
font-style: italic;
font-size: 100%;
border: 1px solid #ccc;
}
#thumb:hover {
border: 1px solid #777;
}
#thumb a {
display: inline-block;
width: 220px;
height: 280px;
text-decoration: none;
margin: 0;
padding: 0;
}
#thumb_image {
width: 220px;
height: 220px;
}
#caption {
font-size: .65em;
float: bottom;
margin: 0;
padding: 0;
background-color: #AACCAA;
}
<div id=thumbnails>
<div id=thumb>
<a href="link to content">
<div id=thumb_image>
image or "Can't find image" message
</div>
<div id="caption">
Name
<br />Author Date
</div>
</a>
</div>
</div>
I've encountered a number of issues regarding the scope of various text and font properties on firefox and safari (can't test any others at the moment).
Specifically, if I move the 'text-decoration:none' line anywhere other than the #thumb a section, underscores reappear on all text in the thumbnail caption, and I can't get the 'font-size:.65em' to take effect in the 'caption' div. I can change the font size in the whole section by moving the line to the #thumb a or #thumb section, but I cannot change just the caption text size by any means I've tried. In both cases, using firefox's inspect element feature shows that inheritance of css properties is working properly for all other properties, so it seems like it is some kind of quirk or issue with how text/font properties are overridden or passed down.
In keeping with Lauren Fauvel's suggestion, I changed my code so that my divs were given classes instead of ids, and somehow this seems to have fixed the scope problem. I'm still not sure why exactly the problem was caused in the first place, but if properly written html doesn't have the problem, I suppose I should consider this solved.
Related
as asked many times before (but never really answered) I want to center a legend in a fieldset.
The trick was done perfectly here, which I also bought for my project: http://themeforest.net/item/aloma-liquid-mobile-template/full_screen_preview/5819068
the code from the css reads like this
fieldset {
display: block;
margin: 20px 1%;
margin-bottom: 20px;
padding: 0 auto;
padding: 15px 0;
border: 0;
border-top: 1px solid #DDD;
width: 98%;
}
legend {
display: table;
min-width: 0px;
max-width: 70%;
position: relative;
margin: auto;
padding: 5px 20px;
color: #eee8aa;
font-size: 20px;
text-align: center;
}
But when I try to redo it in another page in my project, that doesn't use the theme, I fail. Am I missing something in the code above?
The theme uses the code <legend align="center"> which fixes the Firefox issue:
http://jsfiddle.net/ncv8H/
<legend align="center">legend</legend>
In HTML 5, the legend align attribute has been depreciated so here is how I did it.
Note that Bootstrap 4 (don't know about 3) completely hides a field set border and sets the legend width to 100%. So in addition to adding the width:auto, you would also have to use css to set the fieldset border if you want it to display.
legend {
width: auto;
margin-left: auto;
margin-right: auto;
}
for
<legend>Legend</legend>
I'm trying to use CSS divs to add images to my site. I'm using background-image:url(""); but the image doesn't appear when loading the site.
The images I'm referencing are in the same folder as my style.css, and I quadruple-checked that I wrote the file names correctly.
Any help is very much appreciated. Thank you.
CSS:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
HTML: (Am I missing something here?)
<div id="logo">
</div>
div#logo {
background:url(dm-button2.png) blue;
height: 120px;
width: 120px;
position:absolute;
z-index: 100; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
try this, your second background is rewriting the first
use this:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background-color: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
Try replacing Background image and background with something like this
background: blue url('dm-button2.png') no-repeat fixed center;
I am not 100% sure but i think having background-image followed by background, background will overwrite the background-image call since it loads in order
example FIDDLE HERE
start small and add the other attributes.
div#logo {
height: 120px;
width: 120px;
background:url(http://flyingmeat.s3.amazonaws.com/acorn4/images/Acorn256.png) 0 0;
}
The background image will not display if there is nothing to put a background image on... for example, all you have a div tags but nothing inbetween them.
Add at least a br tag or something to create some space for the image to be displayed.
I've coded my website for all browsers but of course IE has issues. Specifically only IE 7. I'm hoping to find a resolution to why it's behaving the way it is with two issues and what I can add so IE will display it properly.
My submit buttons are aligning to the bottom of their containing divs.
CSS for the SUBMIT button for the SEARCH field
#searchform { /*container widget */ position: relative; left: 15px; width: 97%; height: 30px; background-color: #f3f3f3; border: 2px solid #742222;}
#searchform label { display: none; }
#searchform input#s { width: 75%; height: 20px;}
input[type=text],input#s { margin: 0 10px 0 0; width: 60%; }
#searchsubmit{ position: relative; float: right; width: 30px; height: 30px; text-indent: -999px; background: url(http://averylawoffice.ca/img/SEARCH-submit.jpg) center; border: 0px;}
This CSS works in all browsers but IE version 7. Is there a way to make it top align without having to position absolute?
I've managed to move the SUBMIT button up (to the correct position) by left-floating the text-box.
.subscription_email {
...
float: left;
}
Same goes for the search text-box:
#s {
...
float: left;
}
By making those changes, the resulting presentation will be exactly the same as in Firefox.
I am trying to design a simple header to a page in css. I planned to stack two divs on top of each other. The top one has many tabs and the bottom one is a plain solid single image div. But when rendering i see that an extra 5px is getting added to the the heights of both these divs. So i am not able to place the bottom on exactly on top of the other one.
There is a 5px bottom margin automatically. I tried negative margins, reset the global margins and paddings to zero. Still no use.
Heres the code.
<div class ="main_nav">
<div class="first_tab">
<img src ="images/startup/tab1_brown.png" height="25" width="90" alt="Temp" />
</div>
<div class = "ind_tab">
<img src ="images/startup/tab1_orange.png" height="25" width="90" alt="Temp"/>
</div>
<div class = "ind_tab">
<img src ="images/startup/tab1_brown.png" height="25" width="90" alt="Temp" />
</div>
</div>
<div class="lock">
<img src ="images/startup/divbg_new.png" alt="Temp" />
</div>
CSS:
*{ margin:0; padding:0; }
ul.master_navigation
{
font-size: 125%;
font-weight: bold;
text-align: center;
list-style: none;
margin: 0.5em 0;
padding: 0;
}
ul.master_navigation li
{
display: inline-block;
padding: 0 1%;
}
a
{
color: #08f;
font-weight: bold;
text-decoration: none;
}
a:visited
{
color: #88f;
}
a:hover
{
color: #f00;
}
p
{
text-align: justify;
}
p.cent
{
text-align: left;
}
div.header
{
height: 200;
}
div.main_nav
{
display: inline-block;
height: 25;
width: 900;
padding: 0;
margin: 0;
vertical-align: bottom;
}
div.first_tab
{
height: 25;
float: left;
}
div.ind_tab
{
height: 25;
float: left;
margin-left: -10px;
z-index: -5;
}
div.lock
{
margin-top: -100;
height: 91;
width: 900;
padding: 0;
margin: -5;
}
body
{
width:900px;
max-width: 100%;
margin: auto;
padding: 0;
background-image:url(images/startup/bg_2.gif);
background-repeat:repeat-x;
}
.pad
{
padding: 0;
margin: 0;
}
Here's the link to the page
http://net4.ccs.neu.edu/home/pradep/
Ive been spending too much time on this. Please help.
Ege's answer was very useful for me. I have spent hours to find the reason of a bottom padding of some images in div's. It was the line-height. Set it to 0px on the interesting areas:
.divclass {
line-height: 0px; /* crucial for bottom padding 0 !!! */
}
I think your problem is the line-height. Yup, there it is. Just added line-height:0, on firebug and they stuck together.
The thing about inline-blocks is that they behave just like any inline text, you also have a similar issue on the navigation below, because you pressed enter in your code, it will render it as a non-breaking space and add extra x margins to the right and left sides as well. X here will depend on the font size.
In order to solve this, you can either close and open tags on the same line like below:
<div>
.
.
.
</div><div>
.
.
.
</div>
or you can set the font-size and line-height to 0, but thats not always possible if you don't have other selectors inside that div.
You need to specify units on your CSS declarations.
http://jsfiddle.net/m7YCW/
div.main_nav
{
display: inline-block;
height: 25px; /* set px */
width: 900;
padding: 0;
margin: 0;
vertical-align: bottom;
}
Learn to make use of your developer tools in Chrome, if you had right mouse buttoned on the elements and chosen -> inspect it would bring up the dev tools. You can then view the 'metrics' and 'computed styles' areas to see that main_nav was rendering as 30px instead of 25px and also that there was a warning symbol next to the 25 css declaration and it was being explicitly dropped.
Try setting vertical-align:bottom on the images.
I want to display a noscript warning when users have javascript disabled, in the same way StackOverflow does.
I use this html:
<noscript>
<div id="noscript-warning">
Este sitio funciona mejor con JavaScript habilitado. Descubrí
cómo habilitarlo.
</div>
</noscript>
and this css:
#noscript-warning
{
font-family: Arial,Helvetica,sans-serif;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 101;
text-align: center;
font-weight: bold;
font-size: 12pt;
color: white;
background-color: #AE0000;
padding: 10px 0;
display: block;
}
#noscript-warning a
{
color: #FFFFC6;
}
#container
{
width: 98%;
margin: auto;
padding: auto;
background-color: #fff;
color: black;
border-style: solid;
border-color: #3E4F4F;
border-width: 1px 2px 2px 1px;
line-height: 130%;
}
where #container is the main content element of my template.
When the noscript tag is visible, it appears in front of some content. I don't want that, the content should be displayed below the warning.
How can I do that?
If you want the behavior of position: fixed AND need to push the initial content down from the top, you can include a second div in your noscript area. Give this div visibility: hidden and a height equal to the height of the div with position: fixed.
The problem is with you setting position: fixed on the warning. You can't really expect the page's content to move around that, since you're fixing it to the top of the browser window. What would happen when you scroll down? The whole page's content rearranges itself to go around the warning?
Do you want the warning to be stuck at the top of the browser window even if they scroll? If not, position: fixed isn't what you're looking for.