1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Urgent help! css trouble

Discussion in 'HTML & Website Design' started by forevervivienne, May 28, 2015.

  1. #1
    okay I'm currently trying to create a website like: http://paul-demo3.gogetthemes.com/
    what I'm doing now is coding the homepage and I just want to put elements in their right places. Here's my css:

    body{
    line-height: 1px;
    background:#000;
    }

    .wrapper{
    margin:0 auto;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    padding: 50px;

    }

    .menu-fixed{
    width: 300px;
    height:auto;
    position: fixed;
    top:0;
    left: 0;
    background-color: #fff;
    padding: 10px;
    }

    .menu-fixed-wrap{
    margin-top: 7px;
    margin-bottom: 7px;
    vertical-align: middle;
    }

    .main-image{
    position:absolute;
    width:100%;
    top:0;
    left:0;
    height:auto;
    background-color:#ccc;
    }

    and html:
    <html>
    <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="file:///C:/Users/home/Desktop/fv/structure.css">
    </head>

    <body>
    <div class="wrapper">
    <div class="main-image">
    </div>
    <div class="menu-fixed">
    <div class="menu-fixed-wrap">
    </div>
    </div>


    </div>


    </body>
    </html>

    the problem is, I can't seem to get the main image to stick to the right; it doesn't even show up please what could be the problem?
     
    forevervivienne, May 28, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Why are you setting the line-height to 1 pixel? What makes you think layout elements should be set to position:fixed... how can you have DIV when you don't even have content or semantic markup yet? Why would you be absolute positioning a DIV that has a background image?!?

    Much less WHY IN THE HELL would you want a steaming bloated pile of crap like that "paul demo3" garbage with it's scripttardery, "accessibility, what's that" assshattery, and general laundry list of how NOT to build a website no matter how many artsy fartsy types are pissing all over the Internet that way?
     
    deathshadow, May 28, 2015 IP
  3. forevervivienne

    forevervivienne Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    I would appreciate if you were more friendly. I just need corrections and not query. I'm still an amateur; i accept that.
     
    forevervivienne, May 29, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    There are plenty of things wrong with the CSS you posted - it's also meaningless, since we don't have the HTML that goes with it.
    First, there are some general guidelines to creating a website you should follow:
    1. Content first
    Find out what you want to put on the webpage (if you don't have all the content yet, that's fine, use a faximile of it, or use what you have for now)
    Find a text-editor, and put the content in that text-editor (multiple different files is fine, for different types of content) - no markup, just the text and images
    Put in block-level markup - headings, paragraphs, etc. Remember that there is ONE H1, then there are H2 (direct descendants after H1), H3 (direct descendants after H2) etc.
    2. When all that is done, you can start playing around with CSS, to style the different elements as you want to have them
    3. Remember that fixed px values is generally a no-no - and usually are NEVER needed. This is especially important when it comes to #4:
    4. Be sure to create a responsive layout. As long as you use semantic markup and don't use too many stupid CSS-rules, this should be fairly easy to achieve
    5. To cater for different sized viewports (mainly mobile and tablets, but also screens with higher resolutions, and smaller laptop-screens), use @media-queries in the CSS-file to specifically target these, by hiding, rearranging and show different items based on the screen real-estate you have available. The beauty of @media-queries is that they can also be targeting smaller desktop windows (for instance people having their browser in a small window to the side)

    After doing all of that, you can think about using javascript to enhance visuals (but again, a lot of things we used to use javascript for, can now be achieved simply by using CSS3)

    Then, maybe, you'll have a page that works consistently (but won't look exactly the same) in all browsers, on all platforms, and which will look nice while doing it.
     
    PoPSiCLe, May 29, 2015 IP
  5. forevervivienne

    forevervivienne Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    I understand that i should add content and the other things that make up a website, but I'm just trying to create a structure for now before styling and adding content. I have issues with positioning elements with css. For example, in the code, I'm trying to make a fixed menu bar on the side and a huge background image by the right before adding content. Just trying to put things in place but it seems like they're falling apart. The main-image doesn't even show.
     
    forevervivienne, May 29, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Sorry, that's the DI / Fixer in me.

    "If I'm curt with you it's because time is a factor. I think fast, I talk fast and I need you guys to act fast if you wanna get out of this. So, pretty please... with sugar on top. Clean the ****ing car" -- Winston Wolf

    So apologies if you find my manners and methodologies harsh, it's called helping. You will find I am not one to sugar coat anything, blow smoke up your ass, pat you on the back, and tell you everything is fine when it clearly is not. Personally (as a back woods New England Yankee by birth) I find the entire namby pamby "if you can't say anything nice" idiocy more offensive than General Patton's idea of eloquence.

    In the words of the most famous of all Gunny, "Suck it up Princess." :D That's a joke...

    The soothing syrup approach does NOT help anyone apart from making them feel good about having been led down the garden path. That's NOT actually helping someone. "Life is pain, Highness. Anyone who says differently is selling something."

    Thing is you didn't show enough for us to have anything BUT questions.

    ... and that's where we CAN help you; it seems that you are already WAY deeper into the CSS than you should be, almost as if your entire thought process is backwards -- you are also throwing values in there that are gibberish and/or serve no real purpose making it near impossible to even figure out what in blazes you are even trying to accomplish. Hence prompting you with questions.

    Mind you, backwards thought processes in web development are common in all beginners (was there myself a decade and a half ago) -- it's because by nature sighted people are visually oriented, so flash and bling and visual goodies are quicker to influence, even when that's NOT what's actually important in the long run. It's why the ignorant artists with the giant set of donkey brass to call themselves "designers" are so easily able to scam people into thinking their "templates" are worth a damn, when 99.999% of the time they are nothing more than the road to failure. The only thing they are truly artists of is the scam.

    The site you linked to is a laundry list of how NOT to build a website if you care in even the slightest about people actually using it; the massive images, perfect widths, goofy layout, scripttardery -- it's all stuff that has ZERO business on a website in the first blasted place which is why I'm so harsh on it. It's a poster child for everything WRONG with web development today, and the ONLY thing you can learn from it is how NOT to build a website.

    ... and therein lies the problem, you have the process backwards... and broken.

    Again, two things that have ZERO business on a website -- ever notice you don't see a lot of REAL websites pulling those types of stunts and usually it's limited to also ran and soon to go into obscurity artsy fartsy sites NOBODY will EVER give a flying purple fish about? There's a reason for that.

    If you are screwing around with things like position:fixed or absolute positioning of major content areas removing them from flow, you are probably doing something terribly and horrifyingly wrong; same thing if you are declaring fixed widths like "300px".

    ... and that's WHY I'm saying the things I'm saying.

    I'm going to give you the 100% nube treatment and assume you've had smoke blown up your ass by faulty sources. That you are this deep into making CSS but screwing around with DIV before you even have content? You've been led astray, so let's fix that.

    STEP 1) Start out figuring out what you want on the page for CONTENT, as in TEXT and maybe a few small images; at the very LEAST make a reasonable facsimile of what MIGHT go on the page for content. FORGET THE PRESENTATION EVEN EXISTS AT THIS POINT, just put the content into a logical order as if HTML, CSS and your final layoutS (yes, PLURAL!) don't even exist.

    STEP 2) THEN you mark it up semantically. Semantics 101:

    H1...H6 and HR -- H1 is the heading that everything is a subsection of which is why it really only makes sense for there to be ONE h1 on a page, and where possible it should be the first content element! H2 indicate the start of subsections of the H1, H3 are the start of subsections fo the H2, and so forth... HR -- horizontal rule -- being a divider where there's a section/topic change where a numbered heading is unwanted/unwarranted. This provides a general document structure. (and is why HTML 5's nonsense SECTION, NAV, HEADER, ASIDE and FOOTER are pointless redundant garbage!)

    P - goes around GRAMMATICAL paragraphs, aka a sentence or two of actual content text. An image is NOT a paragraph, typically one or two words or an incomplete thought is NOT a paragraph, and in most cases neither are the content of line-items (LI).

    UL/OL with LI - goes around LISTS, typically short bullet points. If they are 'big enough' to warrant having heading tags or paragraphs, they probably aren't list-items (LI) and don't belong in a UL or OL.

    Pretty much all your tags at this point should imply a meaning, said meanings being what things ARE, or more importantly would be in professional writing -- <B> for company/organization names, <I> for book or document titles you aren't quoting, <CITE> for sources you are quoting, <EM> for providing emphasis, <STRONG> for when there's MORE emphasis, and so forth... Which of course is why you ignore the halfwits saying you should always use EM and STRONG instead of B and I. To borrow from a friends example that I seem to post at least every six months:

    <i>GURPS</i>, <b>Steve Jackson Games'</b> flagship roleplaying game, was first released in 1985. Several licensed adaptations of other companies' games exist for the system, such as <i>GURPS Bunnies and Burrows</i>. However, <b>SJ Games</b> has no connection with <b>Wizards of the Coast</b>, producers of the <i>Dungeons and Dragons</i> RPG. <em>No <i>GURPS,</i> content is open-source.</em> <strong>Do not plagiarize <b>SJ Games</b> work!</strong>
    Code (markup):
    B and I don't mean "display in bold or italic" they mean "would be for grammatical reasons bold or italic when not providing emphasis in professional writing".... Nor do the different heading tags like H1, H2, etc mean "bigger font size in bold". That's just their default appearance, and if you are choosing your tags based on their default appearance you are choosing all the wrong tags for all the wrong reasons.

    Which is why at this stage you have NO business adding DIV or SPAN. Those two tags are "semantically neutral" as they have no meaning other than "this section MAY receive styling". Likewise beware that anchor may mean "this text links to somewhere" but it does not imply actual meaning upon that text, so <A> is also semantically neutral. (hence why omitting things like lists on menu items comes across to screen readers and search engines as a run-on sentence!)

    This gives you your non-CSS baseline - important since there's more to a website than just modern CSS3 visual screen targets, or certain size screens. Simple fact is this is the Internet, the only thing we can predict ; not all your users will even be sighted -- how is your screen layout going to make any sense when/if someone wants to print it?

    STEP 3) Only once you have semantic markup of your content or a reasonable facsimile of future content should you be thinking about the FIRST of your MANY diffferent layouts!

    This is the point at which one can add tags like DIV and SPAN, but ONLY once you've expended what you can do with the existing semantic tags. That's why screwing around with DIV before you have semantic markup just leads to pointless code bloat and rubbish designs. CSS is only as good as the markup it is applied to -- hence why garbage HTML/CSS "frameworks" are bloated inaccessible train wrecks of ineptitude I cannot fathom how anyone could be DUMB ENOUGH to use by choice.

    I like to start with the desktop screen layout for pre-CSS 3 capable browsers -- I consider it the lowest common denominator. Many people start with mobile, I consider that broken thinking as you are MUCH more likely to have visitors using browsers not capable of CSS3 media queries (aka responsive design) than you are people on mobile who can't. Why would you start out with the default as the group you CAN target with media queries? That's back-assward. *NOTE* I consider a lot of todays 'accepted practices' to be back-assward. See dicking around in Photoshop or layout before you've done ANY of the above.

    Said desktop layout should first and foremost be two things:

    First, it should be Elastic -- all your major measurements should be in EM's so it's based on the font-size. This also means your font sizes and line-heights should be in % or EM so they are based off the browser default. PX measurements should be avoided as much as possible since they are accessibility rubbish. This is also why massive bandwidth wasting presentational background images are trash used by artsy fartsy types who don't know enough about what a website is to be flapping their mouth-breaking yaps on the subject!

    Second, it should be Semi-fluid -- Having a maximum width so that long lines of text are not hard to follow, while still being 'fluid' in adjusting to fit the display. Depending on the layout a min-width may also be applied so that browsers not capable of media queries don't get a broken layout. If you still care about IE6/earlier you might also use a CSS hack or IE CC's to set a fixed width for those older browsers.

    It also means avoid idioitic halfwit nonsense like "grids" -- any widths you do set should be based on the needs of the CONTENT, and not some arbitrary measurement system.

    Then once you have a working desktop screen resolution layout you use media queries to do things like swap out elements and strip off (or even add) formatting to make the layouts for smaller displays. It's far easier to take things away with media queries than it is to add them, particularly if you start out with the non media-query layout.

    Then and ONLY then do you go in and create the presentational non-content images and hang them on the layoutS -- said images being less and less necessary as things like CSS3, UTF-8, and webfonts (the last of which should be used with an eye-dropper) make the PSD jockey and their skillset increasingly obsolete.

    Finally if desired enhance the page wtih JavaScript keeping in mind the unwritten rule: "IF you can't make a fully working site without JavaScript FIRST, you likely have no business adding scripting to it!"

    The entire above process is called "progressive enhancement" and done correctly it means the page should 'gracefully degrade' -- meaning that if any of the fancy bits of tech along the way don't work, are intentionally blocks, or just don't apply to the visitor's needs, you are still delivering a USEFUL page to users!

    After all that's why HTML even exists in the first place; device neutrality. Again, websites are NOT just about visual design, there's a whole slew of stepping stones that should be taken along the way so that you can deliver your content to everyone, not just the people who happen to magically be seated in front of the same size screen with the same quality of vision you happen to have been blessed with!

    ... and that's also why the train wrecks vomited up by the halfwits dicking around in Photoshop and calling themselves "designers" are inaccessible bloated messes I pity anyone dumb enough to deploy as a website; much less the nubes coming into the process who are duped by the flashy shiny artsy-fartsy crap but then can't figure out why their sites fail time and time again. Most everyone I've ever dealt with working from that approach doesn't know enough about HTML, CSS, emissive colourspace or accessibility to be designing but two things.

    Again, why I was so harsh on what you were doing, and even harsher on the steaming pile of manure you were trying to emulate the behavior of. If you were learning anything of value about what websites are and what they are for, you'd have recognized that site as being the antithesis of sane, rational, accessible design. It is a poster child for everything WRONG with the artsy fartsy approach to building a website.

    ... as evidenced by the real success stories of the Internet. Look at the MAJOR websites, like eBay, Amazon, Facebook, Twitter, Google -- even when they are poorly coded accessibility disasters do ANY of those really look like they were dicking around with layout or goofy Photoshop paintings before they concentrated on the content? Hell, you want to make one of these dipshits calling themselves "designers" when not qualified to design a damned thing recoil in horror, ask their opinion of Craigslist! If it's such a 'ugly wreck' how is it so popular?

    CONTENT OF VALUE -- which is why I advocate the CONTENT FIRST approach!

    That might seem harsh, might burst a few people's bubbles, but that's the TRUTH. Sadly many people out there desperately cling to their arsty bull either because you'd think it was the only way they can scam people, or because they've done it that way for so long that cognitive dissonance has set in -- to the point in either case you'd almost think we were talking about faith.
     
    Last edited: May 29, 2015
    deathshadow, May 29, 2015 IP