Unwanted space between divs - HTML, CSS - css

I have searched through the forums and good old google and have found many answers but non seem to work on my page.
Anyway here is the question,
I have 2 divs that are positioned side by side, and I wish to get rid of the whitespace
www.blisshair.com.au/test.html :(http://www.blisshair.com.au/test.html)
I want to the black from the "link 1" to join to the main content in the center,
Any help would be greatly appreciated,
Thank you.
EDIT: Tried opening in Internet explorer 8 and it seems top exactly how I want it, besides the 2 bottom divs not lining up,
Is it possible to do this with an UL and SPAN tags ? I am aiming for a tabbed look, for example, when you click on link 2, the background around link 2 goes black and the black color "flows" into the main content page, sorry if this doesnt make sense, early AM here :D
Thanks again

For starters: don't use tables in a non-semantic manner, and don't use inline styles when you can avoid it.
You've got a list of links, so put your links in a list:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
...
</ul>
The problem you're having is that you only put the class that produces the background color (menu1) on the first item in your table.
You should give your parent item a class or id instead:
<ul id="nav">...
And then give the entire nav a background color (You'll also have to remember to get rid of the default padding and margin on the nav):
#nav
{
background-color: #000000;
margin: 0;
padding: 0;
}

You might check into css resets like here: http://meyerweb.com/eric/tools/css/reset/
Basically, browsers will default to have margins or padding between div elements or elements that have their own 'block' (h1, h2, and several others).
You'll need to set margin and padding levels to zero, as a starter.

Zounds!
Is this a solution? Certainly seems so!
Quick and dirty:
Float the menu left and give it 100px width;
Use a left margin for the content, do not float it;
Use background color on a container of both the menu and the content;
Realize how much trouble you're going to have if this was a problem already;
Persevere, that is to say DO NOT GIVE UP, no one was born knowing it! :)
The harder it is, the more you'll learn. Expect a lot of learning. :)
The HTML:
<h1 id="header"><img src="FancyHairLogo.png" alt="ZOMG PURTY HAIR" /></h1>
<div id="textContainer">
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div id="content">
<h2>WELCOME TO BLISS HAIR EXTENSIONS!</h2>
<p>
this is the homepage of bliss hair extebnsions, please check back soon as we are contionously updating the content on this page!
</p>
<p> etc ... </p>
</div>
</div>
And the CSS:
body {
background-color: #666;
}
#header {
text-align: center;
margin-bottom: 20px;
}
#header a img {
border: dashed 1px gray;
}
#textContainer, #header * {
background-color: black;
color: white;
}
#menu {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
Issues
"The title's top will not line with the menu's top!"
Yes, because adjoining borders collapse and the bigger applies.
Use a css rule like content>h2:first-child { margin-top: 0px; } to quickly hack it away, but make sure to understand what is happening, it will save you braincells and time in the future.

Related

Bootstrap and numbered lists

Using Bootstrap 3.3.5 and this markup,
<div id="panelSteps" class="panel panel-default">
<div class="panel-heading hidden-print">Actions</div>
<ol class="item-steps list-group">
<li class="list-group-item">Some action</li>
<li class="list-group-item">Other action</li>
</ol>
</div>
Is is possible to have the list display numbers? I have tried overriding the OL element's style with list-style:decimal inside; and overflow:visible;, etc.I can't get to see the numbers beside the list items.
Thank you!
You'll probably want to play with the styling until it's satisfactory design-wise but this will bring the numbers back:
.item-steps {
margin-left: 20px;
}
.list-group-item {
display: list-item;
}
Here's a fix: https://jsfiddle.net/9ehyyrct/ In the JSFiddle, I use Bootstrap 3.3.6 but it applies to 3.3.5 too.
Unfortunately it's pretty hacky:
.list-group-item {
display: list-item;
margin-left:30px;
}
.list-group-item a {
margin-left:-10px;
}
The items show up when you add display: list-item; but they're hidden outside of the viewport.
Bootstrap sort of kicks your ol's numbers to the left, so adding a margin helps them show. The margin-left on the anchor is to counteract the ugly margin I used to fix the issue. Good luck!
You can use the display value to list-item as said by #Fausto NA and try removing the margin left property and asking the list style position to inside.
.list-group {
list-style-position: inside;
}
.list-group-item {
display: list-item;
margin-left: 0px;
}
Here is the JSFiddle
I have used with Bootstrap 3.0.0
I had a similar issue. I was using an un-ordered list and simply wanted the bullets to display in bootstrap.
I ended up just adding an HTML dot (•) inside the li tag, with some non-breaking white space (for indentation).
<li> • my item</li>

Align first line to the left, while other to the right using CSS

Is it possible to have the first line of text (or inline-blocks) aligned to the left, while the next one to the right using only CSS? I'm sure it can be done using JS, but am looking for a cleaner and simpler solution.
I have this navigation bar (which is a <ol> in the markup). It's usually one-line long, but recently we got a case, when it's grew long enough, so that it broke to the second line. Below is the photo of that. What my boss asked me to do is align the second line to the right, while keeping the first intact.
Now it looks like that:
What I'm aiming for is this (I'd then make some fixes to make it look prettier than on the picture below):
The markup. All li items are inline-blocks, but I could change that.
<ol class="phase-labels">
<li class="phase-label phase-current">Company</li>
<li class="phase-label phase-inactive">The Policy</li>
<li class="phase-label phase-inactive">Property Insurance</li>
<li class="phase-label phase-inactive">Additional Clauses</li>
<li class="phase-label phase-inactive">Public Liability</li>
<li class="phase-label phase-inactive">Public Liability Additional</li>
<li class="phase-label phase-inactive">Employers Liability</li>
<li class="phase-label phase-inactive">Quotes</li>
</ol>
You could try using direction propertie + text-align:justify to fill up entire first-line.
What does this involve? :
it reverse the reading direction of li (as inline-boxes) and
punctuation.
if only one line , lis stand towards right.
DEMO
Basic CSS
ol {
display:block;
position:relative;
direction:rtl;
text-align:justify;
}
Note: too bad text-align cannot be overwritten through the pseudo class :first-line.
You have the display:flex propertie too. DEMO
Basic CSS :
ol {
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
}
I did misunderstand what he was looking for sorry everyone, why not try this. I think the following css should work.
ol{
float: right;
}
ol li{
float: left;
}
This answer is based around the idea that if the nav bar has exceeded the parents width, then it's float won't necessarily matter, but aligning everything to the right ensures it positions where you want. And floating the list items to the left, allows everything to be displayed in the proper order

adding styles to different part of an unordered list, wordpress widget

I think the best way to describe my problem is to show you.
http://yourinternship.hailstormcommerce.com/?page_id=21
On the sidebar on the left there is a widget that uses ul, a the moment I have a bottom-border applied to the first li and then the border turned off for any child li after that.
My issue is , the border for "Your Internship" at the very top of the widget doesnt appear until its submenu is finished, ie above "Accomodation". But I want it straight underneath "Your Internship" , like the rest of the menu pages. So basically its bordering the entire li. I understand why this is happening, and the only way I was able to get around it was by putting a border underneath ul li a but the problem is this ends up being very messy, for controlling the width of the border etc. (using padding etc).
Has anyone any suggestions on how I could apply a border to the first link?
Also, on the same note , is it possible to remove the last border under "Contact Us"?
Im asking the second question here as well as I guess my overall problem has to do with styling particular parts of a widget from wordpress.
Thanks in advance for any help. Any questions let me know, because I may have made that sound confusing.
Cheers
It's possible. I made a simplified example that you can learn from:
<ul class="widget">
<li class="active">Your Internship
<ul>
<li>Benefit of our program</li>
<li>Students</li>
<li>University</li>
<li>Why Choose Us</li>
<li>Your Internship Process</li>
<li>Your Language Course</li>
</ul>
</li>
<li>Your Accomodation</li>
<li>Your Employers</li>
<li>Information for Interns</li>
<li>Apply Now</li>
<li>Contact Us</li>
</ul>
To get rid of the border on the active and last item use this pseudo selectors:
.widget > li:last-child, .active {
border: none;
}
To re-add a border on the "active" class, I used a pseudo element:
.active:before {
content: "";
width: 100%;
position: absolute;
top: 25px;
border-bottom: 2px solid salmon;
}
Demo
It might be a bit messier than you want to, but here is a suggestion.
To get the line directly underneath "Your Internship" (but still keeping it above "Your Accomdation") you can do the following:
#menu-your-internship-sidebar .current_page_parent > a {
display: block
border-bottom: solid 1px #DDD;
}
For removing the last border under "Contact Us" you just set the li:last-child bottom border to 0, like this:
#menu-your-internship-sidebar li:last-child {
border: none
}
EDIT:
If you want to remove the border above "Your Accomdation":
#menu-your-internship-sidebar > li.current-page-parent {
border: none;
}

Incorrect html alignment during hover

I have a menu on a web page and I want to add some emphais onto the element that my mouse is hovering over.
Before I hover my mouse the menu looks good and the alignment looks good. To add emphsis, I added a small arrow (or '>' sign). The problem is that now the text jumps to the right by 2 characters.
I want to add the '>' character without my menu text jumping the right. The correct behavior is that the text remains in p
lace and the arrow appears 2 spaces to the left of the hovered menu item.
Note I tried to change my alignment and the whole thing looks like crap. Only text-align: left gives it the correct alignment.
#leftMenu {
position: absolute;
top:28%;
left:24%;
height: 20%;
width: 20%;
font-weight:400
font-size:0.5em;
}
#leftMenu a:hover:before {
content: "> ";
}
How can I add the arrow without the text jumping to the right?
Just have the ">" already exist, just not visible. This way it will take up the real estate on the menu, so nothing will move when it appears. Here is a small example:
CSS:
#leftMenu {
position: absolute;
top:28%;
left:24%;
height: 20%;
width: 20%;
font-weight:400;
font-size:0.5em;
}
.marker{
visibility:hidden;
}
#leftMenu li:hover .marker{
visibility:visible;
}
#leftMenu ul{
list-style:none;
}
HTML:
<div id="leftMenu">
<ul>
<li><span class="marker">></span>Link 1</li>
<li><span class="marker">></span>Link 2</li>
<li><span class="marker">></span>Link 3</li>
</ul>
</div>
I'm not really sure of the exact layout of your menu, but I think the above gets across the general idea.
You could add a padding-left for normal entries that takes exactly the width the arrow would have later and remove it when hovered in favor of the arrow.
However this could be quite a mess since the arrow may not have the same width in every browser (even with same font and font-size).
An other possibility is to use positioning properties to move the arrow to the right location. If you for example use position: absolute; on it, it will no longer move other things around. Be aware that it then will be positioned absolutely inside the next parent that does not have standard position (static).

Firefox CSS nowrap problem

I'm trying to create a horizontal (no line breaks) unordered list of images on my website using code as follows:
<ul class="ImageSet">
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
</ul>
In my CSS, I'm using the following rules:
.ImageSet { white-space: nowrap; }
.ImageSet li { display: inline; float: left; height: 100% }
This is working properly in Chrome, but not in Firefox, for some reason does anyone know why?
EDIT: To clarify, the problem in FF is that the li's still wrap. I'm trying to make them all appear in a single, unbroken horizontal line going off the rightmost edge of the page.
Try removing float:left as display:inline should suffice
When you float li's they will wrap when they reach the end of their parent container (which could be the body tag). If you are wanting the image to disappear out of the screen you will need to set the width of the parent container (the ul) and use overflow hidden or auto to get your desired effect.

Resources