Screenshot 1: https://skitch.com/android86/fm4r7/dreamweaver ( HTML design view)
Screenshot 2: https://skitch.com/android86/fm4fd/dreamweaver ( CSS)
In the screenshot 1, I tried to have the links for website Contact and Login as a part of the Nav tag provided by html 5, however I wanted these to be horizontally next to the hgroup.
I assigned a width to hgroup and now I have a lot of space to the right of hgroup however the nav is starting to line up horizontally, is this something I should handle with position or float property in CSS?
I tried both in various combinations, I assigned a width to nav in order to fit in the area however it doesn't seems to be working. Any clue?
The CSS code is in screenshot 2. After looking at a previous discussion here I thought using class might not be required instead rather parent child relation might be most relevant. I personally thought and read that one should use id's in CSS when it is a very unique scenario and class when we expect to use a certain thing very commonly, is this parent child relation a way of declaring a class? Thanks everyone.
It can be handled by floating both elements left and removing all fixed widths. Here is the amended jsFiddle: http://jsfiddle.net/joshnh/jdUWt/
Related
Currently, I'm trying to center-align four(4) custom html-boxes I've made in Joomla 2.5.x., with the ability to center themselfs after one or more of the boxes is unpublished.
So far, I've tried to make a "div"(with a class) inside an article, where I loaded each of the four(4) custom html-boxes with {loadposition name}. But when I do that, the boxes gets centered under each other in the middle of the page.
In the following example, this is what I would like to get Joomla to do:
I've made five(5) boxes, each in custom html. Then loaded them into one article with the following method: qB48wJSFiddle. Here, when one uncomments a box, the rest of boxes get automatically centered.
With the example above, I would like to be able to do the same with 4 boxes, all of them made in custom-html in Joomla 2.5.x
Can anyone help me with this challenge, or point me in the right direction ?
Best regard
Jens.
<div> elements are block-level elements. That means that, unless you tell them otherwise, they will occupy 100% the width of their parent element.
It sounds like you are loading 4 custom_html modules, which are all 100% wide, which each have their contents centered.
The solution is to force them to the width of their content only by specifying your own custom css, e.g.
.module-centered {display: inline-block; text-align: center;}
Then, to make this apply to each module, set the module class (in the modules advanced settings) to module-centered (note the preceding space).
i've been trying to create pattern for my website using div elements. The problem is than my knowledge in css is very limited and i've no idea how to make the pattern like this
I tryed to use block, inline-block, but were not able to achieve the pattern i'm targeting to.
It's possible to do it with table, but than code looks like piece of thing.
It would be great if you will help me, because doing this not only to create a web site but also to learn css, so comments are really welcome.
Thank you in advance
make a parent div and add all properties to that like width of the container and height of the container. then add css property to each element individually or by grouping in class
Im trying to display the items of a list depending on their class as two seperated columns without adding extra html wrappers or using Jquery.
I've postet an example here http://codepen.io/danielschmid/pen/vwcta/?editors=010 Note: I’ve only added the margin-left and right to better exemplifie what im trying to achive.
The only way i can think of it would be with absolute positions but than i need to know the size of any element and add an individual top position as an offset like here: http://codepen.io/danielschmid/pen/aKBrc/
Any ideas ?
thanks,
daniel
you need to float only one of them, the other needs its layout triggered with overflow:hidden;.
No margin should be used.
to keep the non floatting li standing on right side, you can reset direction on ul and set it back on li.
DEMO
to go further to avoid gaps, you will unfortunately need to multiplicate selectors to test if so many of one kind stands ahead to apply the right negative margin-top. DEMO . this can be endless if ul has hundreds of lis :)
This is fairly simple, so I'm sure I'm just missing something obvious.
Say I have this example code:
<main>
<header>Header</header>
<section>
Content
</section>
<section>
Content
</section>
<section>
Content
</section>
</main>
And initial CSS of:
main{text-align:center;}
section{display:inline-block;width:33%;}
So I have three columns taking up more or less a third of the page each. Now, because of the way the code is written, there will be white space on the page. My preferred method of dealing with this is to set *{font-size:small}, and then add body>main{font-size:0;}.
Of course, thats fine on a simple page, where the font is the same. However, with different sized fonts and header tags here and there, this doesn't work well.
I think I just misunderstood what it is that the > selector does, but what I'm trying to look for is a selector that styles an element, without applying said style to children elements. In this case, I want to style my main element, but I don't want the style affecting the header or section elements.
What is the right way to do this?
And before anyone suggests it, no, I do not wish to use the other methods for removing white space (HTML comments, moving the final part of the closing tag onto the next line, etc.), as they look ugly and I prefer my code to look as presentable as my page.
First off: I'm not exactly sure if this works and not able to thoroughly test right now. This should have been a comment but I'm lacking the reputation to do so. sorry.
The problem is that the font size is one of the properties that is inheritet from it's parent and values like "small" don't set absolute sizes, but relative to the inherited size. so I would try to reset the size right after your main layer, using an absolute value instead of a relative one
body>main>*{font-size:18px;}
The important part is obviously not using a relative size, however, I have no idea how this holds up to user-specified default font-sizes. also, you would have to ensure that any text that has a non-medium font-size (so in your case any and all text) is at the very least a grandchild of main since the font-size for all direct children will be overwritten.
hope this will help you; bw
Browsers I'm using for testing: IE, Chrome, FF;
Ideal layout example pdf: http://designobvio.us/dov2/Homepage1.pdf
Heres the link to the direct page http://designobvio.us/dov2/index.html
While Grid systems are excellent for laying out by width, I always stumble when using height constants.
Inside my code I have 2 major problems:
Ideally, I want to be encapsulate sections of my code by using
parent div that controls the height, margin-top. I've tried to
create this div colored a pale green and padded it for visuals.
this class is shown here:
siteBody #businessSection{ padding-bottom:200px; background:#0F9;}
I've also demonstrated idea in this imageURL: http://www.designobvio.us/dov2/Homepage1Encapulate.pdf
While trying to do this I've come up completely empty handed.
2.So next, I tried breaking down each section individually by using a class .businessInfo
#siteBody .businessInfo{height:200px; background:#ccc;}
Unfortunately this also didnt work and I have no idea why because all the grids line up perfectly.
I hope what I've stated above is understandable. I prefer solution one; however, if not possible 2 will work.
If I'm missing anything I'll response ASAP.
Thanks!
this problem stems from the use of float. For example problem : http://jsfiddle.net/GAvcL/
you can use clear attribute for solve problem.
Solution:
http://jsfiddle.net/qeDs3/
This is a common problem in html. Before closing the div that encapsulates the divs using float, use a div has clear attribute.