I'm having trouble keeping text tagged with class="navbar-text" in line with other links in the navbar. Building off of the Bootstrap 3 example for a fixed top navbar, I noticed that any time the browser width is <768 pixels, the collapsible menu items shows the text without the proper spacing and butted up against the first link in the menu:
(http://www.bootply.com/98784)
The text "Business Infrastructure Services" is a <p> tagged with class="navbar-text" as recommended for text strings in navbars. It looks fine when it is not collapsed (browser width >768 pixels). And, when I try to tag the text as an <a>, the styling is fine and everything looks good. But, it's not meant to be a link, but rather a simple string of text. I've also tried moving the <p> out of the <ul>, but it still shows up weird. Any suggestions on how to resolve this would be greatly appreciated. Thanks!
Edit 12/5/13: I apologize if I was unclear in what I was trying to achieve. Basically, I'd like the <p class="navbar-text"> to appear on its own line, just like the other links in the <ul>, like this:
Edit 12/6/13: Since the release of Bootstrap v. 3.0.3, this issue is partially resolved. The text string now appears on its own line, but doesn't have the proper indentation (See https://github.com/twbs/bootstrap/issues/11735):
I'm not really sure why you're having trouble with Bootstrap's layout, but you just need to get the two types of elements' styles synchronized at mobile sizes:
Demo
#media (max-width: 767px) {
p.navbar-text {
margin: 0;
padding: 10px 15px;
}
.navbar li {
overflow: hidden;
}
}
Update: The original fiddles were lost, so I've attempted to recreate them. In response to the OP's comment about Bootstrap v3.0.3, the overflow statement can be eliminated.
Demo 2
Related
I wanted to use a span element to style some text, but for some reason when I enter that code it will on the right side of the page show that scroll bar. It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
I don't know how to fix that. I have tried reducing the padding, adding <br> at the end, etc.
This is the code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
I have restricted my text to a border on the page, so it looks better, but it can't have anything to do with my problem since I haven't had it before and I've been using this border tactic for a while now. And as well I know the button "My other articles" isn't linked to anything--I'll add the link later. I just need help with this one problem.
Thanks to whomever helps me out with this in advance.
It seems to be rendering correctly for me (Chrome on Linux):
I'd suggest you update your answer with a screenshot of what's happening.
The best thing to try in this scenario is to add the following CSS to your code if it's not working for you:
span {
overflow: visible;
}
Since you're doing inline CSS (you don't appear to have a linked stylesheet), you probably want something like this as your full code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px; overflow: visible;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
overflow: visible; ensures that the element doesn't show scrollbars. In most cases (such as if this rule is applied to a <div>), then text inside the element will visually overflow if the element is a fixed size. The <span> isn't a fixed size (it grows as text is added), and so text won't appear as overflowing. Hopefully, though, it should solve the scrollbar problem.
Alternatively, you could try using overflow: hidden; which will hide the overflow entirely. Try experimenting with either visible or hidden and see if your code works!
More info about overflow: overflow - CSS: Cascading Style Sheets | MDN
It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
Try also applying the CSS to the <p> element as well/instead, or even the <body>. The <span> may or may not be the element that's experiencing the overflow issue, after all. Your question is admittedly worded quite vaguely for us to tell how the problem manifests.
I created a div in my a web site so that the text on the page is neatly contained to a set width. I've also implemented CKEditor5 and am using it's CodeSnippet plugin. When there is too much code on a line, it creates a scrollable box with the text overflowing in that scrollable part (behaviour that I actually desire!). However, the background does not exert that same behaviour so that it looks quite unreadable as you can see in the picture below.
I am quite new to building websites so I don't actually know where to start, Should look into the HTML or do I need to set some configuration in CKEdtior?
https://i.imgur.com/X5FXyGU.png
Cheers,
I found that the issue only arises when I apply a custom style like monokai-sublime.css.
adding
overflow-x: auto;
to
.hljs {
display: block;
padding: 0.5em;
background: #23241f;
}
in monokai-sublime.css fixes the issue for me.
Motive
Google receantly added a feature to display only mobile friendly pages in a mobile google search. Since I did already some CSS tricks to adopt mobile devices, I've confidently tried their test, but surprised by the results. Although I could quickly address 2 errors, there is one, that I have difficulty to quickly fix it: Links are too close together.
My site sports a menu like list, that altough I could quickly fix (and I may already have) and adopt to a mobile screen without any change in the desktop appearance, however sometimes links are inevitabely ends up above in each other in the body of each page. Also on one page there is a list that happens to have a list of links each other, but I'm not sure I would like to apply a CSS style to the list elements, to leave greater space in between list items (yet). I'm not seeking help on how to properly resolve that, (Like only leave gap between them, if they are actually end above each other) because it may fall under the "rethorical" question category. (Of course, I'm open to suggestions, if you have one.)
Question
I've decided, that I'll go with an ugly solution for now, that to leave a margin above&below each link regardless, what is surrounded with. Simply changing the margin did not worked. How can I do this? The page I'm currently testing is at http://adam.lehelj.com/ but the sub-domain is in currently only in hungarian.
Edit
The pages are generated from Markdown using PHP Extra library by Michel Fortin and I would prefer not to modify these files. It has a limited feature where to apply classes. (I believe it is for title, code and links.)
The answer as to why you cannot set a margin top or bottom to an achor can be found here, more specifically about the margin top and bottom:
These properties have no effect on non-replaced inline elements.
one solution that you could use would be to set a line-height on your anchors.
With the links on the top left of your example page you can add a class to the anchor tags.
<a class="links" href=""></a>
The css could be something like..
.links {
display: block; /* default is inline and top margin won't work on an inline element */
margin: 3px 0px 3px 0px;
}
With the social links on the page bottom top margins should work fine for you as well. Just adjust the numbers until google is happy with the spacing and sure that people with fat fingers like me aren't clicking on 5 links at a time ;)
li {
margin: 3px 0px 3px 0px;
}
If the rest of your site is more complex add a class to the ul or li or wrapper div around them to differentiate styles as needed.
html
li class="social-links-item"
css
social-links-item {
css here
}
html
<div class="social-links-wrapper">
<ul>
<li></li>
</ul>
</div>
css
.social-links-wrapper li {
css here
}
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
I have this page: http://www.problemio.com which has a black bar on top which has search and a dropdown menu. That looks reasonably ok.
But then I have another page like this: http://www.problemio.com/category.php?category_id=1 which has those two elements, but for some reason, the search appears on the top left of the bar.
How can I make these elements appear as they do on the home page of problemio.com ?
Thanks!
You have it absolutely positioned over your search box. Fix the absolute positioning and you should be fine.
you don't have you main_styles.css on the interior page, which has this style in it:
#search {
float: right;
margin-top: 7px;
width: 14em;
}
In your page which displays the search box as you desire [problemio.com] the div has the css value 'float: right'. This is the value you need on the other page.
div#search {
float: right
}
I just answered this in the comments of your other question, posted 5 min ago.
Your problem is that the home page div with class nav takes values from main_index.css and the other page takes values from main.css.
There are some inconsistencies between the two which might lead to the problem. Firebug or devtools will help you debug these kind of problems.