WordPress.org

Ready to get started?Download WordPress

Forums

Moving Content; when browser is resized :( (23 posts)

  1. keysuuh
    Member
    Posted 3 years 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

  2. keysuuh
    Member
    Posted 3 years ago #

  3. keysuuh
    Member
    Posted 3 years ago #

    just try resizing your browser when viewing the website.

  4. keysuuh
    Member
    Posted 3 years 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;
    }

  5. keysuuh
    Member
    Posted 3 years ago #

    And this is what the header.php menu links look like

    <ul id="menu">

  6. about<span></span>
  7. (I blocked out the urls, hope that doesn't affect getting any help.

  • keysuuh
    Member
    Posted 3 years ago #

    <ul id="menu">

  • about<span></span>
  • 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

  • keysuuh
    Member
    Posted 3 years ago #

    <ul id="menu">

  • ="http://localhost/wordpress/about" class="about">about<span></span>
  • keysuuh
    Member
    Posted 3 years ago #

    wow, I've tried many times to make the text visible -_-

    <ul id="menu">

  • about<span></span>
  • hopefully this works?

    i just deleted the end tag to the link

  • keysuuh
    Member
    Posted 3 years ago #

    i give up.

  • keysuuh
    Member
    Posted 3 years ago #

    <ul id="menu">

  • about<span></span>
  • keysuuh
    Member
    Posted 3 years ago #

    <ul id="menu">

  • href="http://localhost/wordpress/about" class="about">about<span></span>
  • keysuuh
    Member
    Posted 3 years ago #

    :'( omg that really gave me a head ache.

  • keysuuh
    Member
    Posted 3 years 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.

  • alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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.

    http://www.w3schools.com/css/css_positioning.asp

  • keysuuh
    Member
    Posted 3 years ago #

    :) let me try that right now .

  • keysuuh
    Member
    Posted 3 years ago #

    okay i've tried that...
    but now my side bar is where i never wanted it to be...

  • keysuuh
    Member
    Posted 3 years ago #

    it works btw i just dont understand why everything moved so far?

  • alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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;
    
    }
  • keysuuh
    Member
    Posted 3 years 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...

  • keysuuh
    Member
    Posted 3 years 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??

  • keysuuh
    Member
    Posted 3 years 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.

  • keysuuh
    Member
    Posted 3 years ago #

    *sigh* and Now,
    my footer isnt where it needs to be -_-

  • art42
    Member
    Posted 3 years ago #

    I had the same problem.

    Just make sure that you give sufficient space around each object and you should be fine.

    Art

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags