Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS html5 boilerplate – need help — stuck with lot of CSS issues.

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #44917
    dazdseg
    Member

    Hi,

    I am trying to make a simple website with bp. (it contains 5 images back to back) and a fixed div on top (with sliding up & down menu bar)

    What i am not able to figure out is the proper css elements for each of them.

    1) why are the pics chosen by me is taking 100% size on all elements (i want these pics to take 100%) – i am sure i am unable to put css properly.

    Code:







    2) My jquery menu script is playing hanky panky with me. Its not working as it should be.

    Code:

    in html5 the script will influence below code.

    Can anyone please help me out???

    #135799
    scottnix
    Participant

    Awesome, a cryptic message to figure out before you can solve the problem.

    #135800
    dazdseg
    Member

    Umm, i get the sarcasm :) ,but before that i would like to know what exactly do you think i should be sharing so that i can get my message across clearly.

    #135804
    theacefes
    Member

    The forum tends to muck up code if you don’t wrap it correctly in code tags. Try using CodePen and putting your code there. It will be easier for us to help you.

    http://codepen.io/pen/

    #135855
    dazdseg
    Member

    oops, extremely sorry for flooding the forum. i am providing the link now. that seems to be the best way out..

    http://www.am2pm.asia (kindly help me with this>??) — unable to run successfully on iph5 (pictures are not covering the whole screen)

    #135809
    Paulie_D
    Member

    Extraneous posts removed.

    #135819
    Paulie_D
    Member

    >(pictures are not covering the whole screen)

    In what way…are they too narrow / there is a gap etc.?

    #135828
    CrocoDillon
    Participant

    The pictures are 100% width of their parent elements (which are in return 100% width of their parents, up to the wrapper which width is explicitly set), if you remove the width on the wrapper (and the margin on body) they will be full width.

    #135829
    dazdseg
    Member

    @Paulie_D (thanks a lot for removing extra posts). and answer to your question is yes.
    a) I want the pictures to cover whole screen.
    b) I want the Maven logo and menu (in same line) and fixed on the top menu. when i scroll down.

    Hi CrocoDillon,

    I have tried what you have suggested. but its still not working.

    .wrapper {
    width: 100%; /* 1140px – 10% for margins */ (changed the width to 100% for wrapper)
    /**margin: 0 auto; */ (removed the margin part)
    }

    after this all the pictures should have taken the whole screen but its not. (kindly let me know if there is something which i am missing)??

    #135834
    dazdseg
    Member

    @Paulie_D –>I want all the images in my code to take the whole screen (using h5bp for responsiveness). (this is my biggest problem)

    #135836
    unasAquila
    Participant

    You need to change it in your @media query.

    @media only screen and (min-width: 1140px) {

    /* ===============
    Maximal Width
    =============== */

    .wrapper {
    width: 100%; /* 1140px – 10% for margins */
    margin: 0 auto;
    }
    }

    #135837
    dazdseg
    Member

    in my main.css there are 3 different media queries. ( i am making this website only for mobile and not for anything else). that’s why i will be using majorly the below mediaquery
    @media only screen and (min-width: 480px)
    @media only screen and (min-width: 768px)
    @media only screen and (min-width: 1140px)

    Now, i would like to know what should i exactly change in media query (as per unasAquila) i should make it 533px (for 480px) is that correct/???

    please enlighten me?

    #135838
    dazdseg
    Member

    Hi, unasAquila -> its not working the way you suggested. (i want my 7 images to cover the whole area, there should be no orange left on corners. this can be due to padding, margin,border — for the same, i have already checked the whole code and commented every margin, padding, border -which i was sure i didnt needed at all..)

    @media only screen and (min-width: 533px)
    @media only screen and (min-width: 854px)
    @media only screen and (min-width: 1266px)

    #135839
    unasAquila
    Participant

    so your extra `margin` is coming from the `body` not have the `margin` removed

    body{ margin:0; }

    #135841
    dazdseg
    Member

    i will try that right away. in meanwhile i got another question for you. i was (inspecting the google chrome window) and i am able to see this code

    ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;

    the only problem is i don’t know where it is coming from.

Viewing 15 posts - 1 through 15 (of 22 total)
  • The forum ‘CSS’ is closed to new topics and replies.