Somehow my news is pushed down in Internet Explorer 7 (on all other browsers its ok).
I want to get rid of the gap between the menu's and the news, so the news will fit to the menu area's.
Any idea where I can find the missing link?
Website is: http://www.e107webdesign.nl
Help would be appreciated.
There is a much simpler way of solving this. Just change the source order and wrap divs around the ones on the left side, and ones on the right.
http://work.arounds.org/sandbox/57
Otherwise it will be a PITA to solve this. I hope you are able to modify this somewhat easily and are not constrained by e107 ( horrible CMS imo ).
If source order does matter, you'll probably have to rely on a negative margin + float technique.
PS: For the love of god use -moz-border-radius/-webkit-border-radius/border-radius and DD_roundies script instead of wrapping 90000 divs for rounded corners.
Related
I am very new to this and have a very hard time understanding my lecturer (who unfortunately helps me very little)
This is my assignment (image below). It's a mock up clothing website and my desired layout is on the left, whereas my current progress is on the right. This is my first ever attempt at HTML/CSS so if you could please help me out that would make me a happy man!
Paragraphing the categories like I have to the right
Aligning the black text boxes with the photos above them
Floating the titles on the left, with the paragraphs to the right. (I have tried multiple things with this but to no avail)
Also, I put <h1> for each heading but they aren't going to that size?
using CSS you can set "position: absolute" then use something like "left:100px;"
that is assuming your div tags are correctly set up (or set up in general) from your last statement "Also, I put for each heading but they aren't going to that size?" it seems that your div id, or class id's are incorrectly labelled.
I highly recommend taking a look at http://jsfiddle.net/
It's very possibly the single most useful tool I've ever encountered for css/html/javascript testing/editing/learning. (short of something like Dreamweaver, I suppose).
There are plenty of good tutorials around on how to use it, but it'll really let you toy with little options along the learning process, and will help you 'teach yourself' when things get rough with the teacher.
I want my blog's post(33%width) to be floated from top to bottom, and when they rich the end of the content (static height), to continue again from top to bottom beside the rest of them. I have already made this static web page with columns(link is in the jsfiddle project).
There is a simple static example, of what i am talking about, here :http://jsfiddle.net/KBX5B/1/
<div id="content"><div>
But I want it to be automated (not to pass left and top values for each post) with pure html/css. I would like not to mess Javascript, but if you think it's the only way i would like to know about it.
I am sorry for my bad English and I do appreciate your time.
You can use column-count or column-width properties to achieve what you want. Will only work on modern browsers. IE10 included.
http://jsfiddle.net/KBX5B/2/
Actually I found the solution after reading MANY Posts...
Here it is :)
Vertical-floating elements in CSS?
Im having headaches by trying to fix a small error that appears only in CHROME.
On the index of my website i have 3 containers with little images,and they appear nice on IE and FF,but on CHROME there's a displacement of the second container which i dont know how to fix. This second container is a bit more problematique because it has some mouseover effects with big baloons as tooltips,and if i manage to put all 3 containers in the same line,the tooltips will be displayed only partially.
Please take a look and,if you can,give me few hints.
Thanks in advance.
Your markup is rather schizophrenic. You are attempting to use position:relative; in conjunction with display:inline and float: to position these elements.
Pick one method and use it consistently.
I would recommend floating them, or using display:inline-block;.
I think this has been asked a million times, but with different definitions of the problem. And it's probably either easy to fix or a long lasting wish from web designers and still unanswered. note: I did do a search on css float on stack, but although some look like my problem, so far I haven't found a similar one.
What I'm trying to do will become clear if you see the attachment. I want them in rows of 3 neatly stacked under each other, where the height of each <li> item is different. In other words: the heighest <li> element in a row is leading, and the next row of items should wrap under this one. Right now the items on the new row bump into the content of a longer list item at the beginning, preventing the first item of the new row to fully float to the left.
Please note that I don't want to solve this with php or js, I think a pure css solution must be out there... Because with php, I could of course add a class like "new-row" to it and apply a clear: both to it and it will wrap. If I want to do the same thing in CSS then I can't without using poorly supported :nth-of-type stuff. Besides, the content block is variable in width, so sometimes there are 3 on a row and sometimes maybe only 2 or up to 6.
Who can help?
Use "display:inline-block" for LI, not "float:left"
I'm happy to be proven wrong, but I think you have to use tables for this, or a display: table-* construct. (I personally would go with tables - this is somewhat tabular data.)
Only table rendering can resize a whole row according to its tallest member's height.
It's the only way I can see to do this without JS or PHP.
use jQuery.
Pretty sure this is impossible using just CSS. Unless you're going to use absolute positioning and forget floats all together.
I hope I am wrong though! :)
(Would love to be able to do this w/ css)
See the picture above. Each navigation tab needs to have 2 pixels separation on either side and line up exactly with the header image on the edges.
Now they would like to introduce a 5th navigation tab (and possibly a 6th). Is it possible to code this in a way where you could stick a 5th or 6th tab in there and everything would resize appropriately with lists or tables or some other solution? Still keeping the 2 pixels separation and lining up with the edges exactly? I wasn't sure if it was possible or you would just have to define the widths each time for each tab based on the math involved to line it all up correctly flush with the edges.
I think the best way is to emulate table behavior with CSS. So you can use a list, and still get table behavior.
ul {
display:table;
}
li {
display:table-cell;
}
Here is a demo displaying this with CSS and proper markup. Here's a demo of how it looks with an actual table. I'm not certain on IE<8 support for this CSS, so it may be something to be aware of.
UPDATE: Confirmed: This is not supported on IE6 or 7 natively. You may be stuck with tables or hard-coded widths if you want to support those browsers. There may be a javascript fix to support these display values but I'm not aware of it.
EDIT: I realized my demos were sloppy, so I made another that actually addresses your point about the margins, it uses the :first-child selector to remove the margin from the first link, giving the evenly distributed appearance. http://jsfiddle.net/wesley_murch/pe6wd/3/
It may not be easy. One of the requirements in most implementations of css horizontal menu type displays is setting a fixed width for each element. If you try and do percentages, things start to come apart. However, any thing is possible.
Have you tried looking at LESS or SASS so you can do simple math in CSS?