I have a seemingly simple alignment issue I can't seem to fix. I have a basic menu inside a div. I want to add content underneath the menu, so I created another div with a top-margin of 10px. For some reason, it is not recognizing the content as separate and keeps inserting the content in line with the menu. The information span class is being placed on the same level as the menu. Please let me know if you see a problem with the way these divisions are set up!
The CSS code just has a padding of 10px on the top for the information class.
HTML CODE:
<body>
<div class="content">
<h1 class="title">HOME PAGE</h1>
<img src="pic.jpg" alt="Picture" style="padding:0px 0px 0px 45px"/>
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr"></span>
</span>
</a>
<div class="sdt_box">
EXAMPLE
</div>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
<div class="sdt_box">
EXAMPLE
</div>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">EXAMPLE</span>
<span class="sdt_descr"></span>
</span>
</a>
<div class="sdt_box">
A
</div>
</li>
</ul>
</div>
<div>
<span class="information">
<p>
Some content here
</p>
</span>
</div>
With out seeing your CSS it sounds like a float issue. You need to clear floated elements. Assuming you did them correctly they're most likely on the li tags. You can use overflow:hidden on your parent ul:
ul#sdt_menu{
overflow: hidden;
}
or you can use a cleafix method
ul#sdt_menu:after{
content: '';
display: block;
clear: both;
}
If neither of these work please post your CSS for further help
Related
How can I display the list that in each line I will have one li and not 2 li in one row?
<div class="recent_questions promoted_questions pblock">
<ul class="vertical_menu main_questions">
<li>
<span class="header">
corona<img src="photos/Covid.gif"></span>
<span class="questions"><span class="big_image">
<img class="photo_sub" src="photos/covid.jpg"/></span></span>
</li>
<li></li>
<li></li>
</ul>
</div>
You can simply wrap your images into individual <li> elements, and they will appear below each other:
<div class="recent_questions promoted_questions pblock">
<ul class="vertical_menu main_questions">
<li>
<span class="header">
<a href="covid.php">
corona
<img src="photos/Covid.gif">
</a>
</span>
</li>
<li>
<span class="questions">
<span class="big_image">
<img class="photo_sub" src="photos/covid.jpg" />
</span>
</span>
</li>
</ul>
</div>
I have a site(place) of chat and meet a problem, precise to put an external image to the right(straight) side of some nicks. I am not expert in CSS and do not find the form. The HTML code cannot be modified since it(he,she) is of a third party that does not allow it, but if I can use rules CSS but do not find the form. If someone can help me I will be grateful for it.
Only I want to add an image to the right some name and to be able to change the color of this name especially
I leave the HTML code
<div class="chatUsersTab active scrolled" tabindex="0">
<div class="chatUsersContainer">
<div class="chatUsers">
<ul>
<li class="male vip active">
<span class="nickIcon" title="VIP">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div class="">
NiFúNiFá®
<i class="groupIcon"></i>
</div>
</li>
<li class="active">
<span class="nickIcon">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div class="">
ACá NADIE LABURA
<i class="groupIcon"></i>
</div>
</li>
<li class="active">
<span class="nickIcon">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div class="">
pitufo
<i class="groupIcon"></i>
</div>
</li>
<li class="male">
<span class="nickIcon">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div>
German-78
<i class="groupIcon"></i>
</div>
</li>
<li class="">
<span class="nickIcon">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div>
yo
<i class="groupIcon"></i>
</div>
</li>
<li class="">
<span class="nickIcon">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div>
solo leo
<i class="groupIcon"></i>
</div>
</li>
<li class="away female">
<span class="nickIcon">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div>
Angy
<i class="groupIcon"></i>
</div>
</li>
<li class="female">
<span class="nickIcon">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div>
cabezon-
<i class="groupIcon"></i>
</div>
</li>
<li class="away male">
<span class="nickIcon">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div>
Search_
<i class="groupIcon"></i>
</div>
</li>
<li class="male">
<span class="nickIcon">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div>
h prince
<i class="groupIcon"></i>
</div>
</li>
<li class="">
<span class="nickIcon">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div>
Μaguila
<i class="groupIcon"></i>
</div>
</li>
<li class="">
<span class="nickIcon">
<span class="filler">
<span class="mask">
<span class="status">
</span>
</span>
</span>
</span>
<div>
Lily
<i class="groupIcon"></i>
</div>
</li>
</ul>
</div>
</div>
<div class="chatUsersScrollBar" style="visibility: inherit;"><div style="height: 22px; top: 0px;"> </div>
</div>
If you are not able to edit the html code it is not possible to insert images because they are handled by the html. You would need <img src="img.url" alt="Smiley face" height="42" width="42">in your HTML document. With css you can only control the styling, the size, the opacity..... but you cant force the browser to render an image.
To change the text color normally you would do:
.className {
color: blue;
}
But in your HTML Code there is already some styling applied so maybe your self defined color rule is overwritten (i am not sure) but you can add an !important statement so it will look like this
color : blue !important;
Hope it helped ;)
Using bootstrap 3, heres the snippit from the navbar. Both are in a span so should be inline?
<a href="#">
<span><img src="images/brand/pgblocks-logo-white-nostrap.png" class="brand-img img-responsive"></span>
<span><h3>test test</h3></span>
</a>
Try this
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span><img src="#"/></span>
Logo Title
</a>
</div>
</nav>
Try this :)
span img {
float:left;
}
<a href="#">
<span><img src="https://www.ucl.ac.uk/prospective-students/graduate/images/test/placeholder-200x200"></span>
<span><h3>test test</h3></span>
</a>
Because h3 is a block element.
<a href="#">
<span><img src="images/brand/pgblocks-logo-white-nostrap.png" class="brand-img img-responsive"></span>
<span><h3>... Because h3 is a block element</h3></span>
</a>
<a href="#">
<span><img src="images/brand/pgblocks-logo-white-nostrap.png" class="brand-img img-responsive"></span>
<span>Span is an inline element</span>
</a>
This question already has an answer here:
Changing Bootstrap navbar to fix to column size
(1 answer)
Closed 7 years ago.
So i am using bootstrap 3 and I cant seem to get my minimal navigation menu to fit inside a col-md-1 to allow my other colums to line up across the top of the page. It seems to offset it and sends my other columns below it. How Do i Fix this??? Below is the html and a link to a my full coding. https://jsfiddle.net/Digigod/9qncuhog/2/
<div class="container">
<div class="row">
<div class="col-xs-1 col-md-1">
<div class="navbar navbar-fixed-left navbar-minimal animate" role="navigation">
<div class="navbar-toggler animate">
<span class="glyphicon glyphicon-align-justify"></span>
</div>
<ul class="navbar-menu animate">
<li>
<a class="menu_nav" href="#about-us" class="animate">
<span class="desc animate"> HOME </span>
<span class="glyphicon glyphicon-home"></span>
</a>
</li>
<li>
<a class="menu_nav" href="#blog" class="animate">
<span class="desc animate"> Artist </span>
<span class="glyphicon glyphicon-user"></span>
</a>
</li>
<li>
<a class="menu_nav" href="#contact-us" class="animate">
<span class="desc animate"> Music </span>
<span class="glyphicon glyphicon-cd"></span>
</a>
</li>
<li>
<a class="menu_nav" href="#contact-us" class="animate">
<span class="desc animate"> Videos </span>
<span class="glyphicon glyphicon-facetime-video"></span>
</a>
</li>
<li>
<a class="menu_nav" href="#contact-us" class="animate">
<span class="desc animate"> Services </span>
<span class="glyphicon glyphicon-shopping-cart"></span>
</a>
</li>
<li>
<a class="menu_nav" href="#contact-us" class="animate">
<span class="desc animate"> Contact Us </span>
<span class="glyphicon glyphicon-earphone"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-7 col-md-7"><b>FOLLOW US:</b>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook-official"></i>
<i class="fa fa-google-plus-square"></i></div>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-2 col-md-2"></div>
</div>
Your .col-xs-7 column must also be inside your .container and .row.
I have the following code:
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<ul id="controlsCar" class="entries nav nav-pills nav-justified">
<li data-target="#custom_carousel" data-slide-to="0">
<a href="#">
<span>
<img src="img1.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle</div>
</span>
</a>
</li>
<li data-target="#custom_carousel" data-slide-to="1">
<a href="#">
<span>
<img src="img2.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle1</div>
</span>
</a>
</li>
<li data-target="#custom_carousel" data-slide-to="2">
<a href="#">
<span>
<img src="img3.png" alt="" class="img-responsive iconMenu"/>
</span>
<span>
<div class="menuCarusel">Tittle3</div>
</span>
</a>
</li>
</ul>
</div>
</div>
it resizes perfectly on Safari and Chrome but I do not see any change in the image with using FireFox or IE.
Does it have to do with the SPAN TAG ? Any ideas?
Thanks