might be a stupid simple solution but I can't seem to find what's wrong here:
Simple setting: one <div> container with two contents: one <ul> list on the left and another <div> right beside it.
Problem: Somehow the <li> items got something like a margin-right:auto;. I have not declared it that way anywhere, even with margin:0!important; there is no change. This behaviour makes the right container move under the list block. Because of a picky but required js, I cannot use css floating.
This is the code:
<div class="full">
<div class="text_container" stlye="position:relative;width:250px;">
<ul>
<li class="box_link2">Item 1</li>
<li class="box_link2">Item 2</li>
<li class="box_link2">more items</li>
</ul>
</div>
<div class="text_container">
<p>Content</p>
</div>
</div>
I just don't get why the list item can't be controlled. Is it normal that way? Even if I change the order of the two content divs I still can't click or select text on the right one because of the li's expansion.
Any help appreciated.
See here : http://www.jsfiddle.net/9V2eH/
Because you can't use float, you'll need display:inline-block.
Also, you'll need to precise a width for your div.
Be aware that you may need to precise an overflow:hidden on your div containing the ul to prevent any text overflow from them.
This is normal block behavior.
Are you floating the .text_container to the left ? If not, then nothing is wrong. If yes then a little more info is required like the widths of the .text_container and the width of the .full.
Related
I have tried without success to make a dropdown list without the content are getting pushed down under the dropdown, i can't get it to work, i have tried with float and display wont work :s
Anyone have any suggestions?
It really doesn't seem like you have come a long way at all, so I'd be hesitant to just write a long answer to explain how dropdowns work, and instead suggest that you look up tutorials. You are probably going to need to use javascript to make the dropdown "clickable" to open and close it.
But I'll try to start you off in the right direction!
To avoid making the dropdown move other elements, it needs to have the css attribute "position:absolute;" and the parent element (the element the menu is inside) has to have the attribute "position:relative;"
<style>
.menuButton{
position:relative;
}
.dropDown{
position:absolute;
bottom:0;
}
</style>
<div class="menuButton">
<p>Click me!</p>
<div class="dropDown">
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</div>
Though further, I'd suggest you use javascript to toggle the ".dropDown" class' attribute "display:none" on and off. You will most likely learn better by googling, because I dont think I have teach you, and people are probably not going to give you a lot of help here on such a basic question
I'm new here and to HTML/CSS, so forgive me if I'm being incredibly dopey with this issue. I have searched for an answer to no avail and I finally admit defeat and ask...
I have two div boxes side by side in a container using float. No problmes there (i hope). I wish to split the right hand div box again. I thought it wouldn't be an issue, turns out I was wrong. I just cannot get the Include list (.includebox) to sit next to it's partner the Exclude list (.excludebox) inside .helpbox2
I've cut and pasted what I think is the pertinent code but I can always add more. The problem is live at www.exceptionalcvs.co.uk/help_cv_basics.html unless i've mucked around with it again - which I shall try my hardest to refrain from.
HTML
<body>
<div class="container">
<div class="margins">
<div class="helpbox1">
<h2>1. Introduction</h2>
</p><p>
<p>text here</p>
</div>
<div class="helpbox2">
<h2>2. What do I put in my CV?</h2>
<p></p>
<div class="includebox">Include list
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="excludebox">Exclude list
<ul>
<li>Passport number</li>
<li>Driving license number</li>
<li>Social Security number</li>
<li></li>
<li>Martial status</li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
.container{width:960px;margin:0 auto}
.margins{margin-left:16px;margin-right:16px}
.helpbox2{position:relative;top:0;left:0;width:396px;float:right;padding-right:12px;padding-left:12px;padding-bottom:10px;border-bottom:1px solid #999;border-left:2px solid #999;border-top:2px solid #999;border-right:1px solid #999;background:#efe7ca;margin-left:5px}
.incudebox{position:relative;left:0px;right:0px;width:100px;float:left;margin:0px auto;}
.excludebox{position:relative;left:0px;right:0px;vertical-align:top;width:100px;float:right;margin:0px}
Apologies if the code is a bit messy.
image of issue is here:
http://www.exceptionalcvs.co.uk/img/div_problem.jpg
You missed the l on .includebox
Edit 2
Here's the same code simplified, in a way that I'd do.
Remove the .margins div, unnecessary
Refactor your CSS so that you make style all divs in your second box the same, and make the only difference that one floats right
Spread CSS rules onto separate lines, only make a rule one line if it has a single attribute
Remove the position:relative and the top and right's - again, unncessary
I hope that helps :)
Edit
You also don't need anywhere near as much styling as you've got, these can all go as they're doing nothing (unless you have them for a reason I can't see in your example)
position:relative;left:0px;right:0px;;margin:0px auto;
Also
Try to space out each CSS rule onto a new line, it makes it a lot easier to read
When you use Stack Overflow, people really frequently use JSFiddle to demonstrate their issues. I used your code to help me, see here
Try separating your elements with dashes, but always in lowercase, e.g. .inside-box
Welcome to Stack Overflow :)
Your code is fine, but you missed the 'L' on .includebox in your css file.
Here is the working example: http://jsfiddle.net/SVEh9/
I'm working with vertically aligned items in a list that needs to work in IE7. I've been referencing code on this page which seems to work well cross browser.
I am experiencing an issue in IE7 where the first list item is not expanding to fit the width of the elements inside it. Below is a link to my code.
http://jsfiddle.net/grimmus/jUFMJ/
<ul>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<a href="#">
To Verify
</a>
</div>
</div>
</div>
<div class="outerNumber">
<div class="innerNumber">
<div class="element">
<a href="#">
3903
</a>
</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">To Authorize</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">View Payments</</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">To Submit/Modify</div>
</div>
</div>
</li>
</ul>
The items in the list will be dynamic so it's not really possible to assign a specific width to each LI.
Is anyone aware of a way i can make the list item expand to fit the child elements without a specific width ?
Well, you've got a whole stack of IE7-specific hacks in there (ie the * hacks), but to be honest, some of them are making things worse rather than better.
IE7 does have some CSS issues, and sometimes CSS hacks are justified, but I don't think what you're doing here is really helping.
I was able to get things working much better simply by disabling several of the bits of hacked CSS code.
For example, .items li .outerContainer .innerContainer .element a specifies position:absolute, but only for IE7. This completely changes how the element is positioned, and of course it goes wrong.
And .items li .outerContainer .innerContainer .element,.items li .outerNumber .innerNumber .element specifies top:-50%. This is what is pushing most of your content out of the top of their boxes. If I disable that, the content appears back in view. Not quite in the right place, but visible and usable.
So the first thing I would suggest that you do is remove all of your current IE7-hacks. They are breaking things, not making them better.
Removing those hacks will make your menu usable in IE7. It won't look perfect, but it will be usable. And personally I'd leave it at that. You say you need the site to work in IE7; it will work. It may not look quite as pretty as other browsers, but it will work.
If you really do need to get it pixel perfect in IE7, then yes, you may need a few IE7 hacks. Different ones to the ones you've already tried already though! You need to be a bit more subtle with them. Maybe just adjusting the padding-top on .element or something like that to move the text down to a more central position.
Hope that helps.
[EDITS] Further thoughts on how to resolve the problem...
You mention that padding-top is tricky because some elements go over two lines. This will indeed make it difficult to accurately pad all the elements using a single style. If you know in advance which ones will be longer, you could give them a different padding to the others, but I realise that this might be problematic.
Another angle you could take is Javascript. A small bit of javascript specifically to solve this problem just for IE7 would be fairly simple to achieve, and wouldn't need to have any effect on other browsers.
You could also consider using a JS polyfill library like ie9.js or Selectivizr, which try to fix some of the CSS issues and missing features in older versions of IE.
I have made a list with few elements in it.
Now everything looks right, except image, if i try to add at least one image i get all list messed up, i could use div instead of img tag but i need to resize that image all the time.
Iv'e been at this four couple hours now and i just can't figure out what's causing this, here is my code: http://jsfiddle.net/QwcG5/1/ i hope some one can help me :)
Add vertical-align: middle; and it will be OK. http://jsfiddle.net/QwcG5/16/
I would also suggest replacing these divs
<div class="verify_list_block">1</div>
with li's and enclosing the whole thing in a separate ul. seems cleaner that way.
<li class="verify_list_item">
<ul class="info">
<li class="verify_list_block">1</li>
<li class="verify_list_block">3</li>
<li class="verify_list_block">4</li>
<li class="verify_list_block">5</li>
</ul>
</li>
see the fiddle and demo:
Fiddle: http://jsfiddle.net/QwcG5/13/
Demo: http://jsfiddle.net/QwcG5/13/embedded/result/
I have set the entire layout fluid and it will not break the columns in next line both the li's will be in there respective <li> only.
Note: No modification in structure.
Do I need to manually specify the height of a div which contains unordered list?
When I have it like this, main1 and main2 div overlap if I don't set the height of the div. Is there a way of doing it without specifying the height?
<div id='main1'>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div id='main2'>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
have you tried with float property to float left or right?
#mail1 { float:left };
#mail2 { float:left };
Thanks
If they're overlapping, you've almost certainly got some other CSS applying to it. Use a debugging tool like Firebug for Firefox, the Developer Tools in Chrome/WebKit or the What's-It-Called Thingummy in IE, and look at the applied styles for the div/ul/li.
They won't overlap unless they're absolutely positioned or have other CSS magic applied to them, such as negative margins. Check that first and apply the necessary corrections.
Nonetheless, if you need to retrieve the dimensions of an element dynamically, for instance to dynamically position a highlight in a lava lamp-style menu, use jQuery:
$('#element').outerWidth();
$('#element').outerHeight();
Use position:relative property for two DIVs