When I use the <center> tag along with the <ul> tag in my html code, The bullet points are staying on the left while the text is appearing in the center. How do I fix this?
here is the problematic code:
<center>
<h2>future projects</h2>
<div>
<ul>
<li>Weird dreams</li>
</ul>
</div>
</center>
I've tried everything I can think of, but none of it has worked.
UPDATE:
<center> is Deprecated in HTML4 onwards. So, it can be replaced using CSS as:
<div style="text-align:center">
<h2>future projects</h2>
<div>
<ul style="list-style-position: inside;">
<li>Weird dreams</li>
</ul>
</div>
</div>
Use list-style-position to center the unordered list bullets.
<center>
<h2>future projects</h2>
<div>
<ul style="list-style-position: inside;">
<li>Weird dreams</li>
</ul>
</div>
</center>
set style as list-style-position: inside; for "ul"
The center tag is deprecated.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
Use style-sheet instead...
Like here :
#center{
text-align: center;
}
#center ul{
margin:0px;
padding:0px;
}
<div id="center">
<h2>future projects</h2>
<div>
<ul>
<li>Parrot</li>
<li>stiff</li>
<li>Pining for the flords</li>
<li>resting</li>
</ul>
</div>
</div>
Related
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
How to make a <div> always full screen?
(13 answers)
Closed 4 years ago.
I'm new to programming and was hoping someone could help me with this one.
I have multiple pages and would like them all to be different colors. I wrapped all of my code in a class and then styled them like this:
.tech_page{
background-color: #F4C0CC;
}
And the body looks like this:
<body>
<div class="tech_page">
<div class="nav-bar">
<nav> <p class="nav-home"> Home </nav>
<nav> Tech </p> </nav>
<nav> About </p> </nav>
<nav> Mind Map </p> </nav>
<nav> Projects </p> </nav>
</div>
</div>
</body>
But only the nav bar is getting the background color! Everything else remains white. The entire span of the page gets the background color if I put a class on the body but I don't think that's clean code. Does anyone have any ideas?
By adding height:100vh in your tech_page class should solve your issue.
if you want all the body use the class tech_page you should add the class
<body class='tech_page'>
<div class="projects_page">
<div class="nav-bar">
<nav> <p class="nav-home"> Home </nav>
<nav> Tech </p> </nav>
<nav> About </p> </nav>
<nav> Mind Map </p> </nav>
<nav> Projects </p> </nav>
</div>
</div>
</body>
or you could used
body {
width: 100%;
height: 100%;
}
.tech_page{
background-color: #F4C0CC;
width: 100%;
height: 100%;
}
and for html
<body>
<div class="tech_page">
<div class="nav-bar">
<nav> <p class="nav-home"> Home </nav>
<nav> Tech </p> </nav>
<nav> About </p> </nav>
<nav> Mind Map </p> </nav>
<nav> Projects </p> </nav>
</div>
</div>
</body>
Either write the css in any css file or write the same in style tag as given below.You can write similar css for newly created page.Note:Best practice is to create a css file and write css.Here only tech_page class background is changed ,if you want o change the whole page background you can write css for element css of top level div class.Try it.
<html>
<head>
<title></title>
<style type="text/css">
.tech_page{
background-color: #F4C0CC;
}
</style>
</head>
<body>
<div class="tech_page">
<div class="nav-bar">
<nav> <p class="nav-home"> Home </nav>
<nav> Tech </p> </nav>
<nav> About </p> </nav>
<nav> Mind Map </p> </nav>
<nav> Projects </p> </nav>
</div>
</div>
</body>
</html>
If I have the following HTML. Why does the content of the li drop down a line?
I am looking for an explanation of the behaviour and how to fix
<html>
<body>
<div>
<ol>
<li>
<div>
<div style='width:65%;float:left;'>
Left Text
</div>
<div style="width:35%;float:left;font-style: italic;">
Right Text
</div>
<div style='clear:both;'></div>
</div>
</li>
</ol>
</div>
</body>
</html>
<html>
<body>
<div>
<ol>
<li>
<table>
<tbody>
<tr><td>left</td><td>right</td></tr>
</tbody>
</table>
</li>
</ol>
</div>
</body>
</html>
The DIV's are set as display: block by default, therefore it does not stay in the same line as the LI..
If you set it as display: inline; it will force it to stay in the same line
<html>
<body>
<div>
<ol>
<li>
<div style="display: inline;">
<div style='width:65%;float:left;'>
Left Text
</div>
<div style="width:35%;float:left;font-style: italic;">
Right Text
</div>
<div style='clear:both;'></div>
</div>
</li>
</ol>
</div>
</body>
</html>
Edit:
as Billy said there is an issue with the floats, but changing them to inline-block adds another issue, the margin look at this explanation
Adding a SPAN instead of a div won't solve the issue, because the difference is that the SPAN is display: inline; by default, (the same as we have now with the DIV)
<html>
<body>
<div>
<ol>
<li>
<div style="display: inline;">
<div style="width:65%;display: inline-block;margin-right: -2px;">Left Text</div>
<div style="width:35%;display: inline-block;font-style: italic;margin-left: -2px;">Right Text</div>
</div>
</li>
</ol>
</div>
</body>
</html>
I'm trying to have a ul and a span elements to stick to the bottom of their containing div. The only way I managed to so is through setting them with position:relative and playing with bottom: x for each element separately (according to its size).
Is there a more standard way to do it?
Here is the code: jsfiddle
<div id="header">
<div id="top_menu">
<span id="logo">TechSystems</span>
<span id="sub_logo">think smarter</span>
<div id="menu_content">
<ul>
<li>home</li>
<li>about</li>
<li>contact us</li>
</ul>
</div>
</div>
</div>
<div id="slideshow">
</div>
Try adding to #menu_content:
#menu_content
{
position:fixed;
bottom: 0px;
}
See: https://jsfiddle.net/x7p35mrz/
I'm having a problem with css.
When my image becomes smaller than the list next to it, the grey bar at the bottom of the picture (.meter) won't stick anymore to the picture. I don't know how to solve this. I think it's the opposite of clear that I need, But I couldn't find it on the internet
here is the jsFiddle:
http://jsfiddle.net/RnSq7/
<img src="http://images7.alphacoders.com/407/407975.jpg" />
<section>
<p>
<ul>
<li>long list</li>
<ul>
</p>
</section>
<div class="meter"><span style="width: 50%"> </span></div>
I hope sombeody can help me, thanks in advance.
Just change the order in your markup :
FIDDLE
<img src="http://images7.alphacoders.com/407/407975.jpg" />
<div class="meter"><span style="width: 50%"> </span>
</div>
<section>
<p>
<ul>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
...
</ul>
</p>
</section>
I didn't mention but you are missing the / sign on your closing ul tag in your fiddle. I corrected that typo in the demo too.
Simplest way is to take the div and put it just after the img. But if your div will not house any other element, I would suggest to take it off and use 'border-bottom' property.
Option 1:
<img src="" />
<div class="meter"><span style="width: 50%"> </span>
</div>
<section>
<p>
<ul>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
</ul>
<p>
</section>
Options 2:
<img src="" class="test"/>
and then in stylesheet
.test {
border-bottom: 20px solid black;
}
QUESTION: I am trying to get my {{TEXT}} or ".acton" section to remain centered in the body of the page and between the footer and header at all times.
I'm using this template to build out landing pages in a marketing automation software called ACT-ON. So hopefully whatever fix we can put in for the body content to remain centered will take.
Here is my jsfiddle:
http://jsfiddle.net/misterizzo/dMu79/
<body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Hopefully this is my last questions on this template i've been building.
I sincerely appreciate all the help from everyone so far!
you can easely use the display : table,table-row/table-cell properies along with : vertical-align:middle; if your HTML is valid and with the structure needed.
Reset CSS should be loaded in front of your own CSS, it will, as well, avoid to use !important.
// comment // is not a valid comment in CSS, but /* comment */ is.
http://jsfiddle.net/dMu79/7/
basicly the structure is :
<body or wrapper><!-- as heigh/width:100%; and display:table -->
<header> as table-row</header>
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main>
<footer> as table-row</footer>
</body or wrapper>
Here is one solution that may work for you:
Demo Fiddle
CSS:
.acton {
width: 900px;
position: relative;
margin-left: auto;
margin-right: auto;
height: auto;
top: 106px;
}
You're HTML is broken in places and is missing a closing div. I've fixed it in this Fiddle and the updated code is below:
<div id="header">
<div id="top-left">
<img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li>
<span class="button">NewsWorthy</span>
</li>
<!-- the closing span's were after the closing A -->
...
</ul>
</div>
</div> <!-- this div was missing -->
I fixed it by setting a margin top in the .action section.
Also I removed the position-right and position-left
Notice that the margin-top is set to 40%. This is because it takes in to account the nav and the footer. You can play with the margin depending on the other content that is added above it or below it.
working jsfiddle
http://jsfiddle.net/dMu79/9/
.acton {
width: 900px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 40%;
text-align: center;
}