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.
Related
I just started using jsFiddle to make this (https://jsfiddle.net/travism2006/tp2y5pvu/1/)
body .main .leftAd {
border: 4px red dashed;
width: 160px;
}
Skip Links
<div class="header">
<ul>
<li><a>Coding</a>
</li>
<li><a>Web Tech</a>
</li>
<li><a>Data Fun</a>
</li>
<li><a>Robotics</a>
</li>
</ul>
</div>
<div class="leftAd">sss</div>
Can someone explain why the 'sss' disappears + the border not showing?
I played around with the fiddle and found that my ad-blocker was adding 'display: none;' to the elements with the "Ad" substring in them.
Renaming the elements from 'leftAd' and 'rightAd' to 'left' and 'right' made them display as you'd expect.
HTML:
Skip Links
<header>
<ul>
...
</ul>
<\header>
<div class="left-ad"><p>sss</p></div>
OR
<aside class="left-ad">sss</aside>
I would suggest you go back through your code because there are a lot of semantic issues that need to be addressed if you're trying to understand it better. What Vincent said may work, but it is not the best solution. Also the new semantic elements that are added to HTML5 cut down some of the code and make your code more understandable. It beats having to make divs and text elements over and over. Instead of using div elements you should use the header and aside semantic elements which can be used for headers and advertisements respectively. You can float each with simple CSS like you have done. Lastly, you shouldn't name the class attributes left and right by themselves. That is very general and it makes your code harder for others to discern. I used .left-ad and .right-ad and it worked just fine. If you have any additional questions I'm here to help. It's essential that you understand these concepts to make your code easier to read, debug if need be later on, and makes you really understand the semantics behind what your writing.
when I opened your fiddle, the HTML lacked a lot of content. Specifically, the sss that appears here but not in your js fiddle. When a div has no content in your case it collapses in on itself and that's why you see a flat red line because the top and bottom borders are lying on top of each other. In order to make additional space for the added sss container just add custom padding values etc.
<div class="main"></div>
I have been working on this for the past 4 hours. Tried literally everything but I can't replicate this navigation bar.
This navigation bar has a HTML like this;
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
#for($i = 0; $i <= 2; $i++) <!-- below loops 3 times for testing purposes -->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
//Styling goes here.
</a>
<ul class="dropdown-menu">
<li>Sublink</li>
</ul>
</li>
#endfor
</ul>
</div><!-- /.nav-collapse -->
It works like this:
li tag has transparent, circle background on itself. (e.g <li class="blue"> has blue circle)
Transparent house icons being placed on those circle backgrounds. (They need to be centered on circle, probably requires some margin hacking?)
Konut is a menu name, meaning House (type doesn't matter, I tried using h4 and span)
Numbers below is the amount of total listings. (which is basically a span)
I rewrote my navigation bar like 10 times. Tried block level image div, inline-block divs, margin hacks, relative positioning, absolute positioning, using box models... I'm really about to rip my hair.
The live version can be found here (I can't understand much from their styling)
Can anyone give me a JsFiddle example or tell me what I should be doing? Or is my HTML markup problematic?
Thank you.
Ps. I use Bootstrap 3, if it matters.
Without seeing your code, here's what you should do:
You need to make a right spritesheet. Note how the distance of elements in the original ones is just like the height of the navbar. It's not mandatory, but it fixes vertical positioning/cropping issues that might arise.
Like you sait:
li tag has transparent, circle background on itself. background-position derived from class
Transparent house icons being placed on those circle backgrounds. background-position + padding
Konut is a menu name, meaning House nothing special here
Numbers below is the amount of total listings. also nothing special here, just be careful to position it properly
This is just a list of things you need to know for this. I'll expand my answer once I see what have you done so far.
Of course, if you prefer not to use a spritesheet, but separate images, that's fine too. The only difference would be that you'd specify your background images by their URLs, while the site you gave us is specifying them by their spritesheet position.
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 struggling to figure out why the li values are pushed below the li number in Safari and Chrome. It looks normal in IE and FF (all in a straight line). Please view the following in each browser to see what i mean:
http://jsfiddle.net/CfyQF/
I have tried to replicate this using tables inside the li rather than floating divs, but get the same result.
Anyone know why this is happening and how i can update my css or html or both to resolve this issue?
Thanks!
I spent some time trying to come up with a working solution without the floats and came up with the following, for anyone who needs this here it is:
http://jsfiddle.net/zeaHu/11/
I had a problem like that before.
It's the float that causes this.
You could get rid of the float property and work with margins and padding instead.
not sure if it solves your particular problem, but if you strip out all the css and most of the div's, the numbers line up beside the inputs and the 'X' still sits nicely to the right of the input;
<div>
<ol>
<li>
<input>
<button>x</button>
</li>
<li>
<input>
<button>x</button>
</li>
</ol>
</div>
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.