Upper span is moving the lower span...Why is that - html

I have this page that i am working on and as you can see there are four images...if you look at the lower left booda...it has two links view Booda dog and view Booda cats. If you click the top one the bottom link moves to the left...i for the life of me cant figure out how to fix this. I am using position relitive. Here is some of my css
.booda a.button_below {
left: 107px;
position: relative;
top: 64px;
}
.entry .booda a.button {
position: relative;
right: 13px;
top: 31px;
}
there is other css if you view it in firebug
any help will be greatly appreciated ...thanks in advance

I'm not sure what exactly is going on, but changing the bottom button class from button_below to button and giving it clear:right fixed it for me.
Hope this gets you closer to a solution!

Don't use position: relative with top and right. Use position: relative on their container and then position: absolute on those spans.

It looks to me like it has to do with the text size changing when the link is highlighted.
When the upper span is selected the span is enlarged and the bottom span is shifted to align properly.
Try aligning the spans on the right instead of the left.
EDIT: To align a span to the right you can add this to your current span tags.
position: absolute;
right: 0;
But you have to switch to an absolute position. To continue using relative positioning you can wrap the spans in a single container that has position: relative

Related

how would i have cickable images in the corner of my page

the only time the clickable images worked was when their positions reset and they only were in position when they weren't clickable
here's when the positions reset but were clickable https://x6vsn.netlify.app/watermark00 here's the one where it's in place but it not clickable https://x6vsn.netlify.app/watermark0point1
You can start from the first and position your images with position: absolute.
For example, on an image to put it in the bottom right corner:
...
<img class="bottom-right" src="..." /
...
img.bottom-right {
position: absolute;
bottom: 10px;
right: 10px;
}
And it you want it to be relative to its direct container, you can set position: relative to the container it has be relative to.
edit: I see that you're problem is with the z-index: -99 on the second link. If you remove it, it works just fine.

Trouble with image gallery on codepen

I'm trying to do my first project in html & css but am having some trouble. I'm practicing using codepen and my gallery was going somewhat well but I'm trying to add the last line of images and it seems to be messing EVERYTHING up and I don't know why. Would anyone mind taking a look?
Here's the link
For some reason, when I try to add that chess board it all goes bad.
I'm still very new at this so I look forward to learning a lot.
Thanks.
[1]: http://codepen.io/zenturtle/pen/ezDGC
The margins are causing the issues. When you use margins to position an element you push the elements around it too.
One solution is to use: position: relative and then use the positioning properties: top, bottom, left, right
Example:
#chess {
position: relative;
left: 555px;
}
Another solution is to use position: absolute.
Place position: relative on the <div id="perimeter">
Place position: absolute on each <img>
Position each <img> where you want itwithin the <div id="perimeter">
Example:
#chess {
position: absolute;
bottom: 122px;
right: 230px;
}
That's how you'd position the chess image where you want it.
CSS Tricks has a good
article explaining the position property.

How do I have my menu overlap everything?

I'm trying to create a vertical navigation that drops down to the right when I hover over page names that offer subpages. when I hover over, it appears beside it but the content appears on top of it. I want my navigation to be on top of everything. I tried using z-index. I used 32, 999, 1000, 10000 for my z-index. I tried switching my menu from position:absolute to position:relative but it just adds unwanted space. I tried setting my content to position:absolute with a z-index, lower than the one in my navigation. Here is the link:
http://michellecantin.ca/test/
Your help would be appreciated!
The relative position of your container div a the problem. Float it to the right instead:
#container {
position: relative;
left: 26%;
width: 72%;
}
should be:
#container {
float:right;
width: 72%;
}

using css -top value to move a div position

Hi I am not sure if this is the right way to do it but I am trying to position a div tag back
over the previous div element
This is what I have working
my css that I have used to get this to work looks like
.page-frame {
background-color: #fff;
padding-top: 40px;
position: relative;
top: -35px;
}
so for the top part the div element looks the way I want it to however the bottom on the element hasn't adjusted for the -35px;
I have tried adding a clear div after the element however that doesnt help. What do I need to change to remove the space between my .page-frame div and the next div?
The use of position: relative only shifts the appearance of the element in the page, but not the actual "space" it takes up on the page. So what you have done made your visual change to show the element 35px higher, but it does not cause other elements to reflow around it. Probably, what you need to add is a margin-bottom: -35px to get the final effect you want.
EDIT: Added better fiddle example to show reflow with margin.
Use position: absolute; instead of relative

CSS positioning images and text

I'm trying to get some text between two images. The images are positioned correctly, but there are some weird design issues that are cropping up.
Current Page (web page)
Design Plan (jpg)
What I'm trying to figure out is this:
Background must stop before the right edge of the right image (the girl)
Background must extend the height of the right image
Vertical bar underneath left edge of right image.
Text wrapping before vertical bar
Bars to left of bottom text in center
Any help would be appreciated!
I'd advise against splitting the image up, as Aiden suggests. This is messy and not exactly a modern way to go about it. Try something like this:
.top-pic {
float: right;
margin-top: -200px;
}
Change the margin-top assignment to however high you want the image in pixels. The only issue left is to scale the width of the top-text div to accommodate the image. One way to do this would be to set padding-right: 250px; or so to .top-text h1 and .top-text h2.
This is a bit wrong
.top-pic {
position: absolute;
top: -5.7em;
right: -1.5em;
z-index: 1;
}
Cut this image into 2 images (one in the header next to the tabs, and one in the content). Stuff is floating underneath because of your z-index.
In your CSS. What you want is a pretty basic fixed 3-col layout with the text in the middle. I will point you here:
http://layouts.ironmyers.com/
http://www.csszengarden.com/
That is how CSS layouts are done.
If you move the top-pic above your logo and change the styling you can get a similar effect to what you want.
<div class="top-pic">
<img src="index2_files/girlbird.png">
</div>
<div class="logo">
<img src="index2_files/logo-center.png">
</div>
CSS Changes
.top-pic {
float: right;
position: relative;
top: -50px;
right: -25px;
}