I'm trying to left align the text on my bulletpoints (because it somehow appears centered) with this:
<div style="width: 100%;margin:0 auto;text-align:left">
<ul>
<li>Rechtsanwalt seit 2000</li>
<li>Fachanwalt für Arbeitsrecht</li>
<li>Fachanwalt für Steuerrecht</li>
<li>Abogado spanischen Rechts seit 2001</li>
<li>Zertifizierter Testamentsvollstrecker (AGT)</li>
<li>Fachberater für Unternehmensnachfolge</li>
</ul> </div> <br><br>
You see the result here: http://staging.robering-fries.de/team-member/christof-fries
It is obviously not working...
Where do I go wrong?
Thanks
Florian
Your 'li's is the elements that have text-align: center; on them. From your website:
.attorney-team-details li {
margin-right: 10px;
width: 30px;
height: 30px;
border: 1px solid #d4d4d4;
border-radius: 100%;
line-height: 28px;
text-align: center; // <==
}
so you can change this property in your shortcodes.css file, or adding text-align: left; to each li.
Please add text-align:left to li element.
<div style="width: 100%;margin:0 auto;">
<ul>
<li style="text-align:left">Rechtsanwalt seit 2000</li>
<li style="text-align:left">Fachanwalt für Arbeitsrecht</li>
<li style="text-align:left">Fachanwalt für Steuerrecht</li>
<li style="text-align:left">Abogado spanischen Rechts seit 2001</li>
<li style="text-align:left">Zertifizierter Testamentsvollstrecker (AGT)</li>
<li style="text-align:left">Fachberater für Unternehmensnachfolge</li>
</ul>
</div>
Or you can use css class and !important:
div.myAlign ul li{
text-align:left!important;
}
<div class="myAlign" style="width: 100%;margin:0 auto;">
<ul>
<li style="text-align:left">Rechtsanwalt seit 2000</li>
<li style="text-align:left">Fachanwalt für Arbeitsrecht</li>
<li style="text-align:left">Fachanwalt für Steuerrecht</li>
<li style="text-align:left">Abogado spanischen Rechts seit 2001</li>
<li style="text-align:left">Zertifizierter Testamentsvollstrecker (AGT)</li>
<li style="text-align:left">Fachberater für Unternehmensnachfolge</li>
</ul>
</div>
Related
I made 2 spans, one with a text and one with an image, but they aren't in the same line. Anyone has help?
HTML
.übersicht{
font-size: x-large;
text-align: left;
}
.bild{
text-align: right;
}
<span class="überschrift">
<h1>Übersicht</h1>
<ul>
<li>(Sir) Timothy John Berners-Lee</li>
<li>Geboren am 8. Juni 1955 in London</li>
<li>Britischer Physiker & Informatiker</li>
<li>Begründer des World Wide Web</li>
<li>Erfinder von HTML</li>
</ul>
</span>
<span class="bild">
<img src="bernerslee.png" alt="Dieses Bild ist nicht verfügbar." />
</span>
You can wrap your span inside div and add below css:
.übersicht {
font-size: x-large;
text-align: left;
}
.bild {
text-align: right;
}
.display-flex {
display: flex;
}
<div class="display-flex">
<span class="überschrift">
<h1>Übersicht</h1>
<ul>
<li>(Sir) Timothy John Berners-Lee</li>
<li>Geboren am 8. Juni 1955 in London</li>
<li>Britischer Physiker & Informatiker</li>
<li>Begründer des World Wide Web</li>
<li>Erfinder von HTML</li>
</ul>
</span>
<span class="bild">
<img src="bernerslee.png" alt="Dieses Bild ist nicht verfügbar." />
</span>
</div>
Just use float:right and float:left it will show like that
.übersicht{
font-size: x-large;
float: left;
}
.bild{
float: right;
position:relative;
bottom:110px;
}
<span class="überschrift">
<h1>Übersicht</h1>
<ul>
<li>(Sir) Timothy John Berners-Lee</li>
<li>Geboren am 8. Juni 1955 in London</li>
<li>Britischer Physiker & Informatiker</li>
<li>Begründer des World Wide Web</li>
<li>Erfinder von HTML</li>
</ul>
</span>
<span class="bild">
<img src="bernerslee.png" alt="Dieses Bild ist nicht verfügbar." />
</span>
I'm trying to get my codes work but not sure where's the issue. The links for the first 2 classes don't work and I cannot click on to open linked pages.
Here's the HTML:
footer {
width: calc(100%-80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style-type: none;
font-family: 'Catamaran';
font-size: 24px;
color: #fff;
line-height: 40px;
}
.footer-links-news {
display: none;
}
.footer-sm {
width: 50px;
float:right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
}
<footer>
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
<li>Vietnam Virtual Tour</li>
<li>Hanoi Photo Gallery</li>
<li>Contact</li>
</ul>
<ul class="footer-links-news">
<li>Lastest News on Vietnam News</li>
<li>Soptlights</li>
<li>Economy</li>
<li>Life & Style</li>
<li>Enviroment</li>
</ul>
<div class="footer-sm">
<a href="#">
<img src="Images/plugsin-icon-yt.png" alt="Youtube Icon">
</a>
<a href="#">
<img src="Images/plugsin-icon-fb.png" alt="Facebook Icon">
</a>
<a href="#">
<img src="Images/plugsin-icon-tt.png" alt="Twitter Icon">
</a>
</div>
</footer>
The text of the link needs to go inside the anchor:
<!-- this -->
Home
<!-- not this -->
Home
You need the anchor to actual contain something so it is clickable.
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
Text should be between HERE tags
<footer>
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
<li>Vietnam Virtual Tour</li>
<li>Hanoi Photo Gallery</li>
<li>Contact</li>
</ul>
<ul class="footer-links-news">
<li>Lastest News on Vietnam News</li>
<li>Soptlights</li>
<li>Economy</li>
<li>Life & Style</li>
<li>Enviroment</li>
</ul>
</footer>
I am trying to indent the text from an inline block on safari. It only indents in chrome.
I have tried using margin left. This works in chrome but in safari i have to adjust the margin-left to another number for them to look the same.
I tried the text-indent and the inline-block is not wrapping properly now.
html
<nav>
<ul>
<li><a href="#" >Home</a></li>
<li type="checkbox" class="sub">
<input type="checkbox" />
<a href="#" >Profile</a>
<!-- Begin-->
<ul class="submenu">
<li >
<a target = "box">Profiles</a>
</li>
</ul>
</li>
<!-- end-->
<li class="sub">
<input type="checkbox" />
<a href="#" >Logs</a>
<!-- Begin-->
<ul class="submenu">
<li >
<a target = "box" >View Logs</a>
</li>
<li >
<a target = "box" >Testing a long test</a>
</li>
</ul>
</li>
</li>
</ul>
</nav>
CSS in chrome
nav .submenu a {
*zoom: 1;
*display: inline;
display: inline-block;
max-width: 122px;
margin-left: 55px;
padding: 3px 1px 3px 0px;
}
CSS in safari
nav .submenu a {
*zoom: 1;
*display: inline;
display: inline-block;
max-width: 122px;
margin-left: 65px;
padding: 3px 1px 3px 0px;
}
I tried putting important on the variables to see anything overrides it too and that didn't help them look the same.
I also tried
text-indent: 50px;
Make a table with no content and put it ahead of your text.
<table>
<tbody>
<tr>
<td width="65px"> <!--this is the indent, don't forget to style it so it becomes invisible.--></td>
</tr>
</tbody>
</table>
I am working with a page with a ton of lists and links. I am trying to style each on a little differently, but fonts and color keep being overridden by a style a:-webkit-any-link user agent stylesheet. I have no idea where that even came from. I have tried styling my divs using classes, ids and even inline styling but none of them override the user agent stylesheet.
<div id="dafoot">
<ul id="footList">
<li class="footTop">
Home
</li>
<li class="footTop">
Bikes
<ul class="footUnder">
<li class="footSubBottom">Moutain</li>
<li class="footSubBottom">Road</li>
<li class="footSubBottom">Kids</li>
<li class="footSubBottom">Specialty</li>
</ul>
</li>
<li class="footTop">Activities
<ul class="footUnder">
<li class="footSubBottom">Seminars</li>
<li class="footSubBottom">Cycle for Fit.</li>
<li class="footSubBottom">Choose your bike</li>
<li class="footSubBottom">Rides</li>
</ul>
</li>
<li class="footTop">Contact
<ul class="footUnder">
<li class="footSubBottom">Visit us</li>
<li class="footSubBottom">Contact Info</li>
</ul>
</li>
<li class="footTop">Q & A
<ul class="footUnder">
<li class="footSubBottom">FAQ's</li>
<li class="footSubBottom">Ask a Q</li>
</ul>
</li>
<li class="footTop">About
<ul class="footUnder">
<li class="footSubBottom">History</li>
<li class="footSubBottom">Staff</li>
<li class="footSubBottom">Employment</li>
</ul>
</li>
</ul>
Owner Portal
</div>
CSS
/**/
/* Styling for the footer list */
/**/
#dafoot{
float: left;
margin-bottom: 10px;
margin-left: 10px;
margin-top: auto;
line-height: 15px;
width: 1077.5px;
margin-top: 10px;
position:relative;
color: white;
background-color: white;
}
#footlist{
font-size: 25px;
color: #ffbb00;
list-style: none;
}
a .footTop{
color: white;
font-family: Georgia;
}
Wow..... I didn't capitalize an L in footList. Working now. Hey noobs out there, check your spelling and capitalizing before you post on stack overflow.
I am trying to get a mega menu to work by using hover to activate divs
i have tried it numerous ways, but i just cant get them to show on hover
here is the basic idea in jsfiddle : http://jsfiddle.net/mXx64/5/
and here is the code
HTML
<div class="nav-container">
<ul id="mega-menu">
<li class="menu1">
menu1
</li>
<li class="menu2">
menu2
</li>
<li class="menu3">
menu3
</li>
<li class="menu4">
menu4
</li>
</ul>
</div>
<div class="menu-area1">
menu1
</div>
CSS
.nav-container ul li a:hover .menu-area1 {
display: block;
}
.menu-area1 {
display: none;
height: 100px;
width: 100px;
background-color: red;
}
any help would be appreciated
edit please ignore the spelling mistake, i know its there, but the code doesnt work when it is fixed anyway :(
It will not work because your ".menu-area1" is not in the anchor if you want keep this structure you need to add jQuery otherwise just do like below
working- http://jsfiddle.net/R37rr/
<div class="nav-container">
<ul id="mega-menu">
<li class="menu1"> menu1
<div class="menu-area1"> menu1 </div>
</li>
<li class="menu2"> menu2 </li>
<li class="menu3"> menu3 </li>
<li class="menu4"> menu4 </li>
</ul>
</div>
.menu-area1 {
display: none;
height: 100px;
width: 100px;
background-color: red;
}
.nav-container ul>li:hover .menu-area1 {
display: block;
}
I'm not good on JQuery but this what I got:
Fiddle
$('li').hover(function () {
$('.menu-area1').show();
});
$('li').hover('out',function () {
$('.menu-area1').hide();
});