On my webpage I have a few divs and CSS classes setup to position the div's in the corners of the page. Unfortunately, this does not seem to work unless you submit a URL (You can submit http://google.com to test)
Why does my code only work if there was a form being submitted?
Here is my CSS:
.counter{
position:absolute;
bottom:3;
right:3;
}
.createdby{
position:absolute;
bottom:3;
left:3;
}
.changelog{
position:absolute;
top:3;
right:3;
text-align: right;
}
and the HTML is:
<div class="counter">Views: 16419</div><br>
<div class="createdby">Created by /u/Albuyeh and /u/Aiwayume</div><br>
<div class="changelog">
Giveaways DB Last Updated: 1m 43s<br>Sweepstakes DB Last Updated: 6m 40s<br></div>
Your syntax is incorrect in at least one place.
Check this rule:
.changelog {
position: absolute;
top: 3;
right: 3;
text-align: right;
}
3 what? pixels? ems? percentage?
What you've got now in your css is saying that the div should be 3 from the left. When the page opens, it doesn't know whether you mean 3 pixels, 3 feet, or 3 seconds. To fix this problem, add a unit after the number:
.counter{
position:absolute;
bottom:3px;
right:3px;
}
.createdby{
position:absolute;
bottom:3px;
left:3px;
}
.changelog{
position:absolute;
top:3px;
right:3px;
text-align: right;
}
Related
It's hard to explain without a picture, so if your willing to help, visit this page: http://www.laoistidytowns.ie/node/2
Ok, so on this photo I have the following CSS: (note this is just one picture, but i have classes for each placename)
.ballacolla
{
float:left;
position:relative;
width:200px;
height:200px;
margin-right:40px;
margin-bottom:46px;
}
.ballacolla a
{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */ <br>
filter: alpha(opacity=1); /*workaround to make clickable in IE */
}
.innerbox
{
position: absolute;
bottom: 0;
width:180px;
height:30px;
background-color:#000;
opacity:0.75;
filter: alpha(opacity=40);
padding-left:20px;
padding-top:10px;
z-index: +1;
}
p.boxtag
{
color:#fff;
}
HTML:
<div class="ballacolla"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>
.ballacolla = the dic square container
.ballacolla a = allows the div to be clickable
.innerbox = dark grey box on the bottom
.boxtag = the writing in the innerbox
My problem is the innerbox (grey box) disappears if the link is working. How do I stop the innerbox from disappearing?
Most likely, even with HTML5, you are having difficulties with the div in the link...mixing inline with block styles.
I would take a look at some of the other threads on here pertaining to that. This one points you to a good method of styling a span as a div using a special class and the display;block method: div inside anchor
you can always go for the onclick=(); event on the div as well and eliminate the a tag all together.
In your styles, it says opacity:0 for a tags. Add a class a below.
.field-items a{
background:none;
opacity:1;
}
Ok guys I figured it out. I had to close the tag right after the first div in my html. ie my html now looks like : <div class="abbeyleix"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>
the reason you don't have anything between the tag is because you actually are doing all the work in the CSS... such a simple fix, but it's working now, thank you all for your help
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
padding-right:20px;
height:180px;
width:62%;
margin:auto;
}
.im1{
height:180px;
width:200px;
}
<div id="one">
<img src="inspirational1.jpg" alt="picture1" class="im1"/>
<img src="inspirational2.jpg" alt="picture2" class="im1"/>
<img src="inspirational3.jpg" alt="picture3" class="im1"/>
<img src="inspirational4.jpg" alt="picture4" class="im1"/>
<img src="inspirational5.jpg" alt="picture5" class="im1"/>
</div>
The code above woks perfectly when I'm working im my desktop, but as soon as I open in my laptop all the images are all over the place. I would like to fit them in the div making sure they don't go everywhere if open the website in a new browser, or scree. Any advice is more than welcome please
http://jsfiddle.net/LYL2S/1/
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding:20px;
margin:auto;
width:620px;
}
.im1{
height:180px;
width:200px;
}
If I understood right you can use float instruction for your images
in css add this line:
#one img { float:left; }
where #one is the the container div
or using class on the images:
im1 {float:left;}
and after your container add a div with class .clear where clear {clear:both;}
Since your saying just for css.. you can't do it dynamically like if the number of images change..
However with just css and a fixed amount of images, like the 5 you showed in your question, you can just use percentages instead , like this
.im1 {
width: 19%;
}
Because 100% width of parent / 5 images = 20% , but sometimes you want to set a little lower to make sure some browsers don't render it incorrectly, so they all fit on the same line.
Also, since your using an id #one for the parent, you might need to use
#one .im1 {
width: 19%;
}
instead
http://jsfiddle.net/AmKHx/
Hello all,
I linked my code on the top. My main problem is that I have my header, content and footer perfectly set that works with all websites. It does not have a scrolling feature or anything. Everytime I try to add the Intel Logo to the screen. It does what it is up there. I move it around and tweek it and then it works for one browser and not the other... It keeps changing. I want the logo to stick to the left perfectly along with the header I made with CSS. Also I want the Mobility Group Text at that height right next to the logo, but for some reason it always messes up my header content and footer as well when I paly with it. So pretty much I want The Logo on first then Mobility Group Right next to itand make it very smooth!
Also I have just learned html css and php and if you guys see something in my code that could be done smarter please let me know. I need critical feedback so that I can progress in learning these new languages better so that I can succeed in this field of programming!
Thank you in advance for all the input and advice!!
HTML CODE:
<div id="page">
<div id="header">
<h1><img src="http://wireless.fm.intel.com/test/logo2.png">
<h2>Mobility Group</h2>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
CSS CODE:
Html, body
{
Padding:0;
Margin:0;
Height:100%;
}
#page
{
Min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:87%;
height:auto;
height:87%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
Position:fixed;
Width:100%;
Bottom:0;
Height:50px;
background-color: #115EA2;
}
#header h1
{
position:absolute;
text-align:left;
left:0px;
top:0px;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
}
I'm still not sure I understood the question, but here's what can you do to make it more natural looking. Close the h1 tag, don't make it absolutely positioned, but rather make it float left. The same thing goes to the h2 element. And since the original image is missing, I've put another one, and fixed its height to 60px.
It's basically this:
#header h1 {
text-align:left;
left:0px;
top:0px;
float: left;
}
#header h1 img {
height: 60px;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
float:left;
}
See the results here: http://jsfiddle.net/AmKHx/1/ It should look the same in every modern browser.
Also, try not to use capital letters for CSS attributes - it's a standard to use lower case, and even some browsers might not like it.
Do you have a reset sheet?
Copy this to a new css file, call it reset.css and then load it in your page before you load your main css.
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
I am developing a tab strip. I want the selected tab has to overlap 1px on the container div so that it will have look as it is part of the container...Here is the jsfiddle.
I dont want to make it using script. I would like to prefer CSS style first.If you say that it can't be done using pure CSS, then only can go for script.
It should look as follow:
see the demo
Add this style to your fiddle
.vUiTsContainers {
z-index: 1;
top: -3px;
position: relative;
}
.irmNText {
z-index: 10;
position: relative;
}
Hi now define some css in your css as like this
.vUiTsTabs > ul{
overflow:hidden; // remove this line
}
or add this css
.vUiTsTabs > ul:after{
content:'';
overflow:hidden;
display:block;
clear:both;
}
.vUiTsTab.vUiTsTabSel{
position:relative;
}
.vUiTsTab.vUiTsTabSel:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
height:3px;
background:#F3F3F3;
}
Live demo
I also created a live demo but was beaten to it due to the awfully slow computer I'm using
What I am trying to do is to stack an 'a' tag on top of a 'p' tag using the z-index property. So my html goes like this
<div id="personalText" >
edit
<p id="descText">{{profile.desc}}</p>
</div>
and my CSS goes like this
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
z-index:1;
}
I believe this should stack the a on top of the p tag but that is not happening. Can anybody please explain what is that I am doing wrongly?
position: relative doesn't detach the element from the layout, so by default the element still takes up the same spot it would otherwise. relative has two purposes: to offset an element relative to its "real" position in the layout (which would require setting top, left, etc), and to serve as a non-static value so that child elements with position: absolute would position themselves relative to it.
With all that said, what you probably want in order to do what you're trying to do, is to set position: relative on the parent, and position: absolute on the edit link (at least). But that'd probably be quite ugly, as the text would likely overlap and be unreadable.
You have to also put
#personalText
{
position:relative;
}
#editButton
{
position:absolute; /* change */
top:0; /* new */
left:0; /* new */
z-index:2;
}
As Mihalis Bagos states, you need to push your #descText element upwards.
Here's the resulting CSS:
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
bottom:25px;
z-index:1;
}
Here's the jsFiddle resulting from it.
This is a perfect use for JavaScript:
CSS
.hidden { display: none; }
jQuery
$('#descText').hover(function() {
$(this).find('a').removeClass('hidden');
}, function() {
$(this).find('a').addClass('hidden');
});
DEMO
Here's how you can put the <a> tag on top of the <p> tag: http://jsfiddle.net/gSWJB/1/
The example shows one possible use case: putting the link on top of the description, where the link might only be shown when the user hovers over it.