Need to add the code below to responsive website, but when I try to add H1 title, it is displayed under the image, and not on the top of the text. How to fix this?
.bloque {
margin-left:auto;
margin-right:auto;
}
ul li {
display: block;
}
ul li img {
display: block;
margin: 0 auto;
}
ul li p h1 {
display: block;
}
#media ( min-width: 929px ) {
ul li {
display: table;
}
ul li img,
ul li p {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
}
<div class="bloque">
<ul class="list-unstyled">
<li>
<img src="http://assets2.iavvo.com/assets/badges/badge_top_rating-9c22fb6971659ec79e63302e601816c5.png">
<h1>TITLE HERE</h1>
<p>Well, I'm sure I'm in serious need of some moral spankitude, but guess who's not qualified to be my Rabbi? Magic's all balderdash and chicanery.</p>
</li>
</ul>
</div>
h1{width:100%;margin-left:280%;}
Why are you using table for Css layout?
http://codepen.io/damianocel/pen/OyroZP
Change ul li p {
display: table-cell;
to ul li p {
display: block;
and then if you want to center it all, just add text-align:center to your .bloque class.
Also
ul li p h1 is not a correct selector. Your H1 is not inside of your paragraph so the selector is doing nothing.
You have just to move h1 before img on your HTML... like this:
<div class="bloque">
<ul class="list-unstyled">
<li>
<h1>TITLE HERE</h1>
<img src="http://assets2.iavvo.com/assets/badges/badge_top_rating-9c22fb6971659ec79e63302e601816c5.png">
<p>Well, I'm sure I'm in serious need of some moral spankitude, but guess who's not qualified to be my Rabbi? Magic's all balderdash and chicanery.</p>
</li>
</ul>
</div>
Related
I tried
<div>
<tr><h1><ins><font face ="bold" color = "white">Home</h1></ins></tr>
<tr><h1><ins><font face ="bold" color = "white">Contact</h1></ins></tr>
</div>
resulting in
Home
Contact
How can I align these tags side by side?
either display:inline or float:left which gives more control (but needs <div style="clear:both"></div> afterwards)
h1 {
float: left;
margin-right: 10px;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
nav {
display: flex;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
try this:
{
display: inline-block
};
Ideally, you might benefit from a review of your markup.
Certainly you shouldn't be using multiple <h1> elements within a single document.
The <h1> is the principal heading of the entire document. By definition that means there will only ever be one.
Whenever you want to change the visual presentation of an element, you will use CSS.
HTML Structure
If you are building a navbar, then you can use:
<ul> - an unordered list
and nest this inside a:
<nav> - a navigation element
CSS Presentation
Once you have a structure like the outline above, there are multiple ways to align elements side-by-side:
nav ul { display: flex; }
nav ul { display: table; }
nav ul li { float: left; }
nav ul li { display: inline-block; }
When starting out, one of the simplest ways is to use the last option immediately above:
nav ul li {
display: inline-block;
}
Working Example:
nav {
background-color: rgb(191, 0, 0);
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
width: 96px;
height: 48px;
line-height: 48px;
text-align: center;
}
nav ul li a {
font-family: sans-serif;
color: rgb(255, 255, 255);
font-weight: 900;
}
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
Can someone please explain to me, why li and ul does not expand in plunkr bellow?
I know many has been written about that, but all I found is playing with overflow, height, position and display css properties. I do not use any of that.
a {
padding: 1em;
background-color: red;
}
ul {
list-style: none;
background-color: yellow;
display: flex;
}
li {
background-color: green;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
</body>
</html>
Can someone please explain to me, why li and ul does not expand
Because your links are still inline, and therefor their padding flows out of the line box.
Add display: block for the links.
By default a is inline element, so it don't include padding in height, just update it to block label element. then ul and li will expend.
for updating it to block label you can add display:block or display: inline-block or float: left.
Just add display:block in anchor tag
ul {
list-style: none;
background-color: yellow;
display: flex;
margin:0px;
padding:0px;
}
ul li {
background-color: green;
display: inline-block;
}
ul li a {
padding: 1em;
background-color: red;
display:block;
}
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
Set display:block in a because a is an inline level element so make it block level
Also don't need display:inline-block in li because you have display:flex in ul
You can also remove default padding from ul
a {
padding: 1em;
background-color: red;
display: block
}
ul {
list-style: none;
padding:0;
background-color: yellow;
display: flex;
}
<ul>
<li>
google
</li>
<li>
test item
</li>
</ul>
So i have two Divs like this:
<div id="first_content">
<ul>
<li>This</li>
<li>text</li>
<li>should</li>
<li>be</li>
<li>displayed</li>
<li>in</li>
<li>one</li>
<li>line</li>
</ul>
</div>
<div id="second_content">
<ul>
<li>This</li>
<li>text</li>
<li>should</li>
<li>be</li>
<li>displayed</li>
<li>in</li>
<li>one</li>
<li>line</li>
</ul>
</div>
And CSS:
#first_content, #second_content ul {
list-style: none;
}
#first_content, #second_content ul li {
display: inline;
}
It doesn't work (at least on firefox 34). Style applies only to one ID.
When i remove one of these ID selectors, another one works fine.
I guess it should work? what's wrong?
try:
#first_content ul, #second_content ul {
list-style: none;
}
#first_content ul li, #second_content ul li {
display: inline;
}
if you are trying to select the ul's and li's of both containers you need to specify this with both selectors.
Basic CSS
.foo, .bar { ... }
are two separate selector chains. You have:
#first-content, #second_content ul
^--- applies to <div id="first-content">
^^^^^^^^^^--- applies to any <ul> inside <div id="second-content">
<div> tags do not have a list-style, so your first rule doesn't do anything for the first <div> set. For your other rule set, display-inline will apply to the parent div for first-content, and to the <li> tags in the second-content area.
Here is some css:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
And some HTML:
<div id="navcontainer">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>
These should produce the desired effect. Source: http://css.maxdesign.com.au/listutorial/horizontal_master.htm
Multiple id concatenation has never worked in Firefox. For example, I am using 67.0 (64-bit) and the following CSS works as intended:
#noDisplay {
display: none;
}
#togForm {
display: none;
}
...but if I concatenate that, as shown below, it does not work (one id working, the other not working), and this has always been the case.
#noDisplay,#togForm {
display: none;
}
I know that sometimes the reason is because of conflicting entries, but display: none on its own? - Argue with that if you can!
I'm trying to center a horizontal list of image links, though it seems that the left of the images are being centered. As you can see, the center of the list of images (which are all the same size) is slightly to the right of the text.
HTML:
<div id='nav'>
<ul>
<li>
<a href=''><img src='images/login.png' /></a>
</li>
<li>
<a href=''><img src='images/add.png' /></a>
</li>
<li>
<a href=''><img src='images/forum.png' /></a>
</li>
</ul>
</div>
Css:
#nav {
text-align: center;
}
#nav ul {
list-style: none;
margin: 20px auto;
}
#nav li {
display: inline-block;
margin: 0px 30px;
}
What can I do to completely center it?
Working Demo : http://jsfiddle.net/3d6TS/
The <ul> tag by default adds padding. You need to set padding:0 manually to <ul> tag.
#nav ul {
list-style: none;
margin: 20px auto;
padding:0;
}
#nav { text-align: center; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
the solution is the display:inline on the li
A good solution would be to maintain the margin-left and make sure the first child has a left margin of 0. This causes both the first and last children to have no margins on the edges it meets with the parent. This is good as :first-child doesn't catastrophically break styles in >=ie7 where as :last-child is unsupported in <=ie8 making the reverse of this infeasible for the time being.
#nav ul li {
display: inline-block;
margin-left:30px;
}
#nav ul li:first-child {
margin-left:0;
}
In my website, I am trying to get the rollover effects working.
Currently, on no mouse hover, the ul li item is displayed as text but on mouse hover, it has a rollover effect to show the image.
Instead of having text in the normal mouse non-hover state, I want to have images.
That means, mouse hover and non-mouse hover are both different images, and there's no text
I wanted to ask how do I get such a rollover effect working, in contrast to what I have currently. (non-mouse hover is text which I want to to change to images as well)
Here is the jsfiddle of how I currently have rollovers: http://jsfiddle.net/PF35v/7/
You have all of the images hidden by default so when you put an image inside the a tag, it is also hidden.
ul#nav li a img { display: block; }
This will make the images in links always visible but the others hidden by default. I think that's what you're asking for.
Here's two different approaches, I'm sure there are others:
HTML-Centric
<ul id="nav">
<li>
<a href="#">
<span>My Text</span>
<img src="http://goo.gl/tYsDU"/>
<img class="hover" src="http://goo.gl/UohAz"/>
</a>
</li>
...
</ul>
#nav,
#nav li {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li a img {
display: inline;
}
#nav li a img.hover,
#nav li a span {
display: none;
}
#nav li a:hover img {
display: none;
}
#nav li a:hover img.hover {
display: inline;
}
http://jsfiddle.net/RdRcj/1
CSS-Centric
<ul id="nav">
<li>
</li>
...
</ul>
#nav,
#nav li {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 128px;
height: 128px;
background-image: url(http://goo.gl/tYsDU);
}
#nav li a {
display: block;
width: 128px;
height: 128px;
padding: 0;
}
#nav li a:hover {
background-image: url(http://goo.gl/UohAz);
}
http://jsfiddle.net/RdRcj/
The first is probably the "best" from a flexibility standpoint; you don't have to hard-bake the dimensions in like you do the second. However, if they're unchanging, perhaps the second is preferable for your approach, it just takes targeting each li and a specifically, which can prove a little brittle.