Posted 1 year ago #
I've read that one person adds an image so the sidebar wouldnt move.
it worked.
except now the "about" custom css menu moves...
and the image overlaps the blog content...
what can I do to resolve this problem?
P.S
(if you look in IE you can see part of the blog text there,
in FF you see just a tiny dot,
this clearly means the content is being overlapped)
Http://ohplastic.com
Posted 1 year ago #
Posted 1 year ago #
just try resizing your browser when viewing the website.
Posted 1 year ago #
here is the css for the menu area;
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 100px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}
#menu .about {
width: 75px;
height: 14.5px;
background: url(***) no-repeat;
left: 96px;
top: 73px;
}
Posted 1 year ago #
And this is what the header.php menu links look like
<ul id="menu">
(I blocked out the urls, hope that doesn't affect getting any help.
Posted 1 year ago #
<ul id="menu">
i see the typing in the example makes a link actually pop up not the actual text in my header file.
so i repalced href with tag
Posted 1 year ago #
Posted 1 year ago #
wow, I've tried many times to make the text visible -_-
<ul id="menu">
hopefully this works?
i just deleted the end tag to the link
Posted 1 year ago #
i give up.
Posted 1 year ago #
<ul id="menu">
Posted 1 year ago #
<ul id="menu">
Posted 1 year ago #
:'( omg that really gave me a head ache.
Posted 1 year ago #
please dont report me if multiple posts like that is not acceptable.
i'm new to this.
and I was only trying to make the text visible to the helpers.
try and add a position: relative; to the style of #wrapper:
#wrapper{
margin: 0 auto 0 auto;
width: 450px;
text-align: left;
position:relative;
}that way, the position: absolute of your div #sidebar is no more relative to the browser window.
Posted 1 year ago #
:) let me try that right now .
Posted 1 year ago #
okay i've tried that...
but now my side bar is where i never wanted it to be...
Posted 1 year ago #
it works btw i just dont understand why everything moved so far?
adjust the values of left:225px; and top: 100px; in:
#sidebar{
margin: 0 auto 0 auto;
position: absolute;
float : right;
left:225px;
top: 100px;
width:200px;
text-align: justify;
line-height: 13px;
background: #eeeeee;
margin: 0;
padding: 0 10px 0 8px;
}
Posted 1 year ago #
okay thank you for that part :)
i noticed when i add
"position:relative;"
to the .img class the blog content and menu link moves to the bottom.
but when i use absolute the content is hidden under the image
why does that happen?
&it also seems that hen i added the relative
the image shifted to the right
and i cant position it to the top right like i want...
Posted 1 year ago #
i just checked the link you gave me after i posted all of that -___-
i found out that using fixed instead of absolute and relative help the image.
i tried relative for the container also and it didnt work
so i switched to fixed and the text now overlaps the image :D
i thank you so much for this wonderful help :D
If you have spare time on your hands to help a first timer
please send me and email :)
i don't know how i will send that to you??
Posted 1 year ago #
I've been reading the page to the link you gave me
and tried different codes.
the image is sent to the back with
"position: fixed"
how ever when i tried resizing the browser again,
the sidebar along with the blog content would would again .
grrr.
Posted 1 year ago #
*sigh* and Now,
my footer isnt where it needs to be -_-
Posted 1 year ago #
I had the same problem.
Just make sure that you give sufficient space around each object and you should be fine.
Art
This topic has been closed to new replies.
