I want the following code to display only 1 line of text. How can I get rid of the break between the span and the ul?
<div id="twitter_div">
<span class="talenthouse">#twittername: </span>
<ul id="twitter_update_list">
</ul>
</div>
With the following CSS:
*{
margin: 0;
padding: 0;
}
#twitter_div{
font-family:"lucida grande",tahoma,arial,sans-serif;
color: #999999;
font-size: 71%;
background: url(images/twitter_bg.gif) top left no-repeat;
width: 965px;
height: 48px;
overflow: auto;
padding: 15px 0 0 85px;
}
.talenthouse{
font-family: "Helvetica Neue", "lucida grande",tahoma,arial,sans-serif;
color: #80c242;
font-weight: bold;
font-size: 135%;
display: inline;
}
ul#twitter_update_list{
list-style: none;
width: 780px;
height: 15px;
display: inline;
}
Try this CSS.
<style type="text/css">
ul, li, ol{display:inline}
</style>
Short answer: put this in your CSS.
ul#twitter_update_list, ul#twitter_update_list li { display: inline; }
Try to use a reset sheet to remove all paddings/margins from the elements.
Google for 'eric meyer reset sheet'.
Then put the list an the content to display:inline;
You can set the CSS to display the UL inline. This will also remove the dots.
#twitter_div li { display: inline; }
Thanks
Andi
I believe this should work:
#twitter_div span { float: left; }
#twitter_update_list { float: left; margin: 0; }
EDIT: I just added the margin: 0 which brings the list up to the same level as the span.
Related
Good morning,
I have a menu with a few options. I want to display an image and next to it a string, menu hyperlink. For example:
<ul>
<li class="category" id="category-19">
<a class="dropdown-item" href="http://localhost/new.domain/test-test" data-depth="0">
::before
Test Test
</a>
</li>
</ul>
And my CSS:
#header .menu, #header .menu > ul > li {
display: inline-block;
}
ul {
list-style: none;
}
#_desktop_top_menu a {
text-transform: uppercase;
}
.top-menu a[data-depth="0"] {
font-weight: 600;
padding: .1875rem .625rem .375rem;
}
.dropdown-item {
display: block;
width: 100%;
padding: 3px 1.5rem;
clear: both;
font-weight: 400;
color: #373a3c;
text-align: inherit;
white-space: nowrap;
background: none;
border: 0;
}
I Want to have something like that:
How to get this effect ? thanks for any help.
You can use the <pre> tag before Test and close it.
The tag defines preformatted text.
You can force-wrap be giving it a fixed size and using word-wrap:
.dropdown-item {
display:block;
width:150px;
word-wrap:break-word;
}
Below is a screenshot indicating the manner I intend on placing an image and text above a list.
my desired design
Below is my screenshot in terms of my misalignment problem.
my alignment problems
Below is the HTML for the image, the "FIRSTNAME SURNAME" text and the list below it:
<section class="vertical_menu_bar_section">
<div id="img_logged_in_user">
<img src="http://static3.depositphotos.com/1005574/205/v/950/depositphotos_2053115-Smile-button.jpg"
height="128" width="128" align="left" /><p>FIRSTNAME SURNAME</p>
</div>
<div id='vertical_menu'>
<ul>
<li><a href='#'><span>CALENDAR</span></a></li>
<li><a href='#'><span>TOTALS</span></a></li>
<li><a href='#'><span>OPTION 3</span></a></li>
<li><a href='#'><span>OPTION 4</span></a></li>
</ul>
</div>
<section>
Below is my CSS:
/* Section - Vertical menu bar */
.vertical_menu_bar_section {
color: #FFFFFF;
background: #FF0000;
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin: 0;
height: 100%;
}
#vertical_menu {
background: #FF00CC;
list-style: none;
margin: 0;
padding: 0;
width: 200px;
font-size: 20px;
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
}
#vertical_menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#vertical_menu li {
margin: 0;
padding: 0;
list-style: none;
}
#vertical_menu a {
background: #333;
border-bottom: 1px solid #393939;
color: #FFFFFF;
display: block;
margin: 0;
padding: 8px 12px;
text-decoration: none;
font-weight: normal;
}
#vertical_menu a:hover {
background: #2580a2 url("/public/images/hover.gif") left center no-repeat;
color: #fff;
padding-bottom: 8px;
}
/* */
#img_logged_in_user {
clear: both;
display: block;
float: left;
background: #2580a2;
}
Any ideas as to where I'm going wrong.
Thanks.
Please check if this is what you need
Fiddle
For the both Divs .img_logged_in_user and .vertical_menuI have introduced to a one common Div named as .basic_div The width in the Basic_div will affect the both and will be aligned
Also added a <span> so the user name wont get below the pic.
To keep the image and name aligned you should set the width property of the wrapping element (which is #img_logged_in_user):
#img_logged_in_user {
width: 250px;
}
Then set the image margin to add a spacing between them:
#img_logged_in_user > img {
margin-right: 20px;
}
See live example here: http://jsfiddle.net/cdog/sbu24c45/.
I have a pretty specific question: I'm building something like a simple flat table (I don't use table itself because of rounded borders issue).
I'm using unordered list here and the problem is that I can't figure out how to align items in the second column, taking into account that the content should be dynamic (e.g. changing numbers).
Here's the markup for one row:
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
And CSS:
.ktbl_head {
padding: 15px 0 0 0;
height: 100%;
background-color: #ebe7e7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.ktbl_head ul li {
display: inline;
padding-right: 135px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 300;
color: #888888;
}
.ktbl_mid_wht {
background-color: #ffffff;
height: 100%;
padding: 20px 0 0 0;
}
.ktbl_mid_wht ul li {
display: inline;
text-align: left;
padding-right: 90px;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
color: #888888;
}
Thanks for your attention!
here is my implementation on aligning the table without the table tag:
HTML
<div class="container">
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
CSS
.container {
border-radius: 10px;
border: 1px solid rgb(200,200,200);
overflow: hidden;
}
section {
font-family: "Open Sans", sans-serif;
width: 100%;
}
section:nth-child(2n+1) {
background-color: #ebe7e7;
}
section ul {
padding: 0;
margin: 0;
height: 65px;
}
section ul li {
width: 45%;
line-height: 65px;
display: inline-block;
}
section ul li:first-child {
padding-left: 35px;
}
Result
Explanation
You see, in the HTML, I added a new div as a container to create the curved corner with border-radius (the overflow: hidden needs to be used so that the content is encapsulated by the container).
For the CSS, section maintains general property such as font-family. Furthermore, section:nth-child(2n+1) is used to create background-color every other element starting with 1st,3rd,5th,... element. The selectors section ul, section ul li, and section ul li:first-child are used to make the CSS selectors more semantic (it makes clean code and easy to maintain in the future). Please see the code below for the demo. Happy coding!
PLAYGROUND
Give all the li's a width in which all of the content-length will fit..
I'm lost... I tried the other answers given in the questions with no results.
Here, my CCS:
ul.nav { padding-top: 5px; font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif; float: left; }
ul.nav li { margin-left: 7px; }
ul.nav a { font-size: 17px; color: #918f8f; text-decoration: none; text-shadow: 1px 1px 0px #fff; padding: 15px 6px 18px; }
ul.nav a:hover { color: #000000; text-shadow: 1px 1px 0px #fff; }
How can i center my navigation bar?
You can give your UL a fixed width and center like this:
ul.nav {
width: 200px;
margin: 0 auto;
}
If this navigation isn't supposed to be a sidebar, then remove the float: left;
Try this
body{ text-align:center;}
{And rest of your code...}
and it will be in center.
Remove float:left;
add a width.
add margin:0 auto;
`
css
ul.nav {
padding-top: 5px;
font-family: 'OFL Sorts Mill Goudy TT', Georgia, serif;
width: 300px;
margin: 0 auto;
}
Remove the float first of all - it will throw your list over to the left of the screen. Then, you have two options:
Give the List a fixed width, then use margin:0 auto.
ul.nav {
width: 40em;
margin: 0 auto;
}
This if fine if you will always have a set amount of links in your nav bar. Not so useful if this changes frequently, or even dynamically. I would prefer the following solution, although an additional bit of markup is required
Use a wrapping element, styled display:table
The HTML:
<nav class="my-class" role="navigation">
<ul>
...
</ul>
</nav>
Then your CSS:
.my-class {
display: table; /*centers its contents*/
width: 100%; /*make sure it doesn't collapse*/
margin: 0 auto;
}
ul {
whatever /*just don't use text align!*/
}
Now it doesnt matter how much you put in that list, it will always center for you.
I'm trying to put my navigation bar next to the header, but it's forcing the header on top of the navigation. If you don't know what I mean, this is how I want the header and navigation menu to be laid out:
Snow Candy <-
This is the HTML that I've got:
<div id="header">
<h1>Logo</h1>
<ul id="nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul></div>
<div id="content">
<h1>Header One</h1>
</div>
This is the CSS I've got:
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#header{
float: right;
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #3C7DC4;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #FF8F00;
}
#content{
background: #FF8F00;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-style:solid;
border-width:10px;
border-color: #121212;
min-height: 200px;
vertical-align: bottom;
}
Ok, Henry.
I added some code into the css - http://jsfiddle.net/JET4v/2/
Also added wrapper to keep it all in control.
This basically says that there wont be anything beside #header and
#content
Also #header #header h1 #header #nav #content will all be
floated to the left.
And #wrap basically centers itself.
#wrap { margin: 0 auto; width: 700px; }
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
Note that you might want to add width and height values too, but not height to the #content of course.
And if you want to use #wrap you should know that it should be the width of your widest element(s)