Im building a webpage as part of an assignment, so fair warning, my css and html probably isnt very good.
Im having this issue where this invisble box appears to be pushing the text on my webpage to one side. not all the text, just the first couple lines.
Here is an image:
http://i.imgur.com/xtYd6xi.png
For the life of me i am unable to find a reason for this.. weird margin.. to be added.
Here is my code:
http://pastebin.com/MVRpx8uq
Can anyone give me any insight as to why this is happening? Also if there is any way i could improve the code, pointers would be appreciated.
Try adding clear: both; to your "Locations" ID selector.
Instead of this:
#Locations
{
position: relative;
left: 0px;
text-align: left;
}
Do this:
#Locations
{
position: relative;
left: 0px;
text-align: left;
clear: both;
}
Let me know if this works.
Related
I am really bad with css and html, can somebody help with this simply problem?
On the bottom of the [site][1] i have text and sharing icons. How can i make them in one row? Like on right from text. It looks horrible now.
Thank you!
here:
this css should work:
.text-muted {
display: inline-block;
}
div.ya-share2 {
display: inline-block;
float: right;
margin-top: 20px;
}
explain: it makes both elements able to coexist in the same line, plus the margin-top is just for aligning it.
add that to your CSS file and youre good to go
I'm trying to get my navigation bar to the right of the logo in my Wordpress theme. It's being built with Underscores. I've managed to line up the primary navigation and the logo the way I want it, basically, with this CSS:
.main-navigation {
position: relative;
float: right;
top: -4em;
width: 55%;
display: block;
clear: both;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
float: right;
}
and here's a picture of how I want it to look:
I understand that negative margins (assuming top: -4em; is considered with negative margins) aren't elegant or the best way to handle these sorts of things. Plus, I generally find these kinds of workarounds usually come back to bite me later on.
I'm new to playing around with JSFiddle, so I hope I've done this correctly! Here's my code, now condensed!: http://jsfiddle.net/DMDesigns/d39ej96r/11/
What's the best way to make this happen? I've been searching, seen a lot of people ask this question, but many of the answers have been too specific to their website to help me.
This took me the better part of the day to figure out, yesterday, but disappointed with the lack of responses, here's what I figured out. I'm posting it here for anyone else having a similar problem.
First, I took the logo (named .header-image) and added:
float: left;
position: relative;
Then I took the navigation I wanted to the left of (named .main-navigation) and removed my workaround, which was
float: right;
top: -4em;
width: 55%;
and changed clear:both; to clear:none;
I added a little personal CSS to my .main-navigation to make it match the logo which was
height: 112px;
background: #69d7f9;
z-index: -1;
padding: 28px 0;
and I removed any floats from .main navigation ul.
It's better to create a main div and insert both logo and navigation section in the same div with float:left; for both of them. Let me know if you get this or I'll let you know by an example.
Using the Underscores starter theme for WordPress, the navigation bar can be floated to the right of the logo (or site title) using the following method:
Add the following CSS to your style-sheet:
.site-branding{
float: left;
display: inline-block;
}
.site-description{
display: none;
}
#site-navigation{
float: right;
clear: none;
width: auto;
}
These instructions are based on the Underscores theme as is before customisation.
I am trying to create a handle for a progress bar on my website. I have the bar there and it works perfectly, but when I try to draw the handle above the progress bar it gets cut off. See the picture attached. The code I have now is:
CSS:
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
display: block;
width: 14px;
height: 14px;
margin-top: -5px;
z-index: 1;
background: url(../img/sprite.png) 0 -394px;
}
HTML (Just a picture because I believe that this is a CSS issue):
and this is what it looks like on my page:
Does anyone know what the issues might be? I feel like I am close to solving it, but I could use some help getting there! Thanks.
padding-up the div in which your progress bar is placed will work.
in the class mejs-time-rail , add the following code: padding-top: 5px; in that class. if that doesn't work, try to increase the 5px to 10px
I want to do a navigation with list elements formatted as table so the width of all elements is the same but it won't work for Firefox.
HTML:
<div id="#navigation">
<ul>
<li>
<a>Menu1</a>
<ul>
<li><a>Sub1</a></li>
<li><a>Sub2</a></li>
</ul>
</li>
<li><a>Menu2</a></li>
</ul>
</div>
CSS (some properties are missing but only such things as color...):
#navigation {
position: relative;
height: 25px;
width: 852px;
}
#navigation>ul {
width: 850px;
top: 0px;
padding: 0;
margin: 1px;
list-style-type: none;
display: table;
table-layout: fixed;
border-collapse: collapse;
}
#navigation>ul>li {
position: relative;
height: 25px;
display: table-cell;
}
#navigation>ul>li>ul {
position: absolute;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation>ul>li>ul>li {
/* nothing really happening here */
}
JS Fiddle:
http://jsfiddle.net/ZrsXv/2/
Everything works fine in Chrome, Safari, IE8 and greater and with some modifications also in IE6 and IE7
But in Firefox I will always get this
I know I'm not the first one having Problems but I have also tried solutions I found on stackoverflow but if something is changing this is everything I get
So is there a solution that won't mess everything up?
I think your problem is that position: relative; doesn't really work on table cells. I couldn't find a source at the moment but I'm pretty sure I have experienced the same problem before.
So what is happening in Firefox is that the width of #navigation>ul>li>ul is calculated as 100% of #navigation which is the closest ancestor with a position value other than static (default position value).
You can go around the problem by inserting a dummy element with position: relative; (f.ex. a div) inside #navigation>ul>li and then #navigation>ul>li>ul must be changed to #navigation>ul>li>div>ul
The easiest solution is to reference already-existing examples of menus built from nested lists.
http://www.devarticles.com/c/a/HTML/Building-a-Drop-Down-Menu-with-Nested-HTML-Lists/2/
I'm not really sure why you're using display: table, either; it's been a while since I last made a multilevel menu myself, but I never used that display method, and none of the examples I found after a brief search did either.
Reading other answers and comments I understand why you're using display: table and it could be acceptable...
I tryed different solutions and nothing work for Firefox so, if you are interested in using this method I can suggest to give the fisrst li element width to the children ul using javascript / jQuery like I did in your jsfiddle here
Otherwise I can not help you in a different way... sorry.
I am currently finishing a site that the client wants to work on all browsers. However, there seems to be a CSS issue which I can not get around. The border around this page seems to start from the middle of the page, as opposed to surrounding the entire page. It works on all other browsers though. I am guessing that it is a float problem, but the #contact-form underneath has basically the same CSS applied to it but the border still surrounds it, while the #info seems to have broken out of the border.
The webpage in question is http://lunaskymoda.co.uk/contact-us/
The only validation error is with an unregistered keyword "Nextgen", but i doubt that is the problem. I have spent an entire day tackling this and cannot seem to come up with a reasonable explanation as to why this is happening.
the CSS for the possible HTML elements producing the error are:
#main #main-content {
border: 1px solid white;
display: block;
margin: 12px 0;
background: black;
}
.contact #main-content .info {
margin: 10px;
width: 300px;
font-size: 14px;
color: white;
float: right;
display: block;
}
You're not the first one to have issues with ie6 :)
The problem is of course the "clear: both" of the clear class not being honoured, so you need to hack it.
Here's a possible approach:
http://damienhowley.wordpress.com/2009/04/01/ie6-hack-replacing-clearboth/
You may also try to replace the <div class="clear"></div> by <br clear="all">.