Longtime Java programmer, pretty new to CSS/HTML in general. Here is my portfolio site I am working on.
www.zdware.com/projects.html
Going to it with a non-large browser window forces my content to spill into another div. Currently, I added some padding to it, so its not exactly spilling, but now the content is pushed down (for some odd reason, even though there seems to be space.
I am using a few "hackish" things to sort of like :
margin-bottom: -10000px;
padding-bottom: 10000px;
for my two "columns" in the middle. Would this have anything to do with it?
The two columns I have are effected by this.
.sidebar1 {
float: left;
min-height: 100%;
min-width:250px;
width: 20%;
background-color:gray;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.content {
padding: 10px 0;
width: 80%;
float:right;
}
.content section{
padding-left:30px;
}
I've tried adding min-width to .content, but it doesn't really do anything. I do have rather bigger images on the pages, but they should still fit.
To elaborate visually..
My preferred way I would like this to work is for the non "container" sections (which holds both the sidebar and content tags) to be shortened, instead of the container.
I also feel like this is a common problem. However, dealing with the way CSS is, I feel if I implemented someone else's solution (based upon their own problem) that another piece of code would end up preventing it from working.
The min-width: 250px; rule on .sidebar1 is what's causing the .content div to position itself beneath the sidebar. If you get rid of that, then your content column moves itself into the right position.
As for what to do with the logo, I'd either bump it down so that it fits in that space, or set it to have a percentage width in the css so it always fits in that column regardless of how wide the column is.
And yeah, I'd lose the 10000px negative-margin hack.
Related
I am designing a fluid page which requires:
parent: 80% (of the screen)
container contains x number of images, width:10%, float left.
The container needs to be autosized as wide as the content, max-width is 50% of the parent.
I have tried different techniques to set display to inline-block, and attached the jsfiddle here. http://jsfiddle.net/7D9XS/
#parent
{
width: 80%;
}
#container {
max-width:50%;
border:solid 1px red;
display:inline-block;
}
.uploadItemPreviewThumbDiv
{
width: 20%;
margin: 10px;
background: cyan;
float:left;
}
.uploadItemPreviewThumbDiv img {
width:100%;
}
OK, Here you go...
.uploadItemPreviewThumbDiv
{
width: 70px;
margin: 10px;
background: cyan;
float:left;
}
JSFiddle!
Remember, the problem here was that the whole of the talk was going on in percentages.. and percentages tend to be one of the most unreliable things that you can come across while developing responsive designs, and on a side note, if I were you i'd use jquery plugins like Isotope or http://mixitup.io/
And Yeah, this is as far as i know, maybe someone could explain quiet better clearer..
Ok Let me try to put it this way...
This is sort of a paradox, where your conditions are..
You want your innerelements(content) to be of a certain percentage
width of the container.
But on the same time you dont want to specify what the width of the container would exactly be.
Because you want the container to be "autosized as wide as the content"
Which again brings us back to the 1st point.
It is like both the 'container' and the 'innerelements' are arguing over who should take the responsibility of being a specific width First, and each one is telling the other to attain a specific width, so that he himself can then adjust his own width based on that.
I have here a code in Dabblet: http://dabblet.com/gist/5705036
I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].
Is there something wrong with my coding?
Do floats proper for layouts ? or I need to use anything else?..
I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]
Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.
Here is the code.
#maincontent {
border: 1px solid #BBBBBB;
border-radius: 5px 5px 5px 5px;
display: table-cell;
margin-top: 15px;
min-height: 400px;
padding: 2px 6px;
width: 700px;
}
Hope this helps.
First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:
#contentWrapper {
width: 1000px;
overflow: hidden; /*scroll / auto it's depends on You */
}
I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.
#contentWrapper {
width: 992px;
}
Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?
So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.
Id like to know why my inner wrap of the desktop css for this site is not working.
Basically if set innerwrap to margin:0 auto; and width: auto; there is no problem, but it's not centered on the footer or main div
When I have innerwrap as it's currently set margin:0 auto; and width:960px; you'll notice that the page presents a horizontal scroll bar after resizing the window a bit, and all the content is squished to the left with a white background starting to become visible.
Is there anyway to have it transition fluidly to the next tablet size layout without have a scroll bar appearing and content getting squished?
It shows Scrollbar because of the padding you apply in .innerwrap
Read this article about the Box Model
Use of padding on the sides of certain elements when applying 100% width to parent element its not recommendable because it adds width to the whole group, and since you,re using the browsers width it shows the scrollber to see the extra space you added.
My humble advice is that if you want a block element to appear centered apply an margin:auto style rule whenever is possible, the same also has to be displayed as a block element with no float.
Remove this:
.innerwrap {
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
Keep This
.innerwrap {
margin: auto;
width: 960px;
}
Since you are applying fixed margins for you social icons they will show misplaced, so don't use fixed margins for centering them, use percentage width instead.
you may want use a common class for aligning them
.social {
background-position: center center;
background-repeat: no-repeat;
display: block !important;
float: none;
height: 150px;
margin: auto;
padding-top: 50px;
width: 30% !important;
}
For a.twittersocial and a.twittersocial:hover and the rest of the social links just keep the background properties.
Create a determined class if you need to apply common style rules to several elements (if there are many of them) and avoid usage of ID selectors whenever is possible, use classes instead (.daclass).
Use a web inspector like Firebug to track down styling errors.
Good luck Developer!
I want to nest a div inside another div so that the outer div grows with the inner div as the inner div has text placed inside it. Would appreciate any help. Here is a link so you get the idea. You will need to open your browser up to full screen to see the bottom of it correctly.
Hello Slalvenko, Have posted up both your code (thank you kindly) and my code which I know is not perfect but I'm learning. Yes I am aware of css reset styles that set browser default values to 0 and I did download one once. But I'm hoping that in a years time I will be aware of all of this and just write it into my code. I suppose a reset saves time and trouble but I'm enjoying pottering around what with all of this being new to me. Here is your code and my code. Mine is slightly different because I was wanting to add two more divs to it later which I will show you when I get there. Mike http://www.hnw7.com
.outer {
background-color: #CCF;
margin-top: 0px;
right: 0px;
margin-right: 0px;
bottom: 0px;
margin-bottom: 0px;
}
.inner {
width: 535px;
background-color: #E6E6FF;
color: black;
padding: 20px 50px 20px 50px;
overflow: hidden;
margin: 0 auto;
}
I'm not sure if this was your question but try this. The floats in your .inner div are making the parent's height 0, since the floats take those elements from the document flow. You need to clear those floats if you want your parent to have actual height. I find that easiest way to do so is to add overflow:hidden; to the parent element.
You can read about clearing floats here
I have fairly simple layout, like this:
<div class="card">
<span class="attack">1</div>
<span class="defence">2</div>
</div>
They're arranged on top of each other with simple display: block. What I want to achieve is when a card is in specific areas, "attack" shows on bottom and "defence" is on top. I know I can make it with jQuery, but can I achieve the same effect using pure CSS?
Technically, this is a business rules thing, which is not the domain of your cosmetic layer.
In an HTML document, the order of elements from first to last has semantic meaning - your case is not different, I suspect, in that you are trying to indicate some difference in importance from one element to the next (in the document, not just the visual representation) depending on the context.
So your approach should be JQuery, or some other method of changing the meaning of the relationship of these two elements in terms of their order in the document. CSS is intended to change only their cosmetic appearance.
With situations like this, it can be helpful to think, "what if someone could not see the elements, and had to rely on a screen reader to read them in the order they appear in the document? Would this information (not just the content of the two elements, but their relationship) still be correct and comprehensible?"
You may not intend for this to be accessible to the blind, but that's often a good sanity check for how to approach a problem like this.
I'm pretty sure this will work:
.card {
width: 100px;
height: 150px;
float: left;
}
.attack, .defence {
width: 100px;
height: 75px;
clear: right;
}
/* Play with height and padding-top of .defence to
get the text to the very bottom */
.attack-top .card .attack {
float: left;
}
.attack-top .card .defence {
float: right;
height: Wpx;
padding-top: Xpx;
}
/* Play with height and padding-top of .attack to
get the text to the very bottom */
.defence-top .card .attack {
float: right;
height: Ypx;
padding-top: Zpx;
}
.defence-top .card .defence {
float: left;
}
There are a few details missing in your description, so I'll try to fill in my assumptions, and you can let me know if they're valid or not.
You said "when a card is in specific areas". I'll assume these areas can be represented by different containing classes (.attack-top and .defence-top, but rename as you see fit).
I'm assuming that a .card is 100px wide and 150px tall. If these width and height values are wrong, fill in the correct ones and make the appropriate recalculations. If .card doesn't have fixed width/height, it may still work, but I'm less confident, and you won't be able to get the bottom text to go to the very bottom of the card (just below the top text).
The first thought is to use absolute positioning within .card.
.card { width:100px; height:50px; position:relative; }
.attack { width:100px; height:25px; position:absolute; top:25px; }
.defense { width:100px; height:25px; position:absolute; top:0; }
In this example, .attack will be (visually) below .defense. But note, if you disable CSS, the true arrangement will be seen.
If you know the height of the element, you can use position: relative (with positive and negative values, respectively) or position: absolute. But this is all very hacky and comes with a lot of side-effects - I would do it in Javascript instead.
You can do this by using (if you only want to do the swap in div.card):
.card .attack {
position: relative;
top: 1em;
}
.card .defence {
position: relative;
top: -1em;
}
But as others have mentioned this can have some unintended side-effects. E.g. the above sample will move swap position correctly only for 1 line blocks.
No, you can't. Even if you decided to try to "hack" it out in CSS, the resultant CSS would be huge, messy, and not easily maintained. The corresponding jQuery code would be very simple by comparison, easily understood, and easily maintained.