When I change size of display in ¨Show code¨ mode in Google Chrome text changing size, but I set font-size 30px Big screen Small screen
*{
margin: 0;
padding: 0;
outline: none;
font-size: 30px;
}
<nav id="head-menu">
<ul id="head-bar">
<li> <p href="#">Sobre nos</a></li>
<li> Menú </li>
<li> Galería </li>
<li> Contactos </li>
</ul>
</nav>
Result always the same and I can't understand why
Related
How do I make the background color touch each end. I am fairly new to html and CSS below I have the code that I input for the background. Please let me know exactly what I need to change in my code. I know some of it needs to be changed I just don't know exactly what I need to change.
.black {
background-color: black;
font-size: 20px;
}
<div class="black">
<hr>
<h2 class="white">Documentation Examples</h2>
<a>
<ul class="documentations">
<li>
Savings or Checkings Accounts
</li>
<li>
Stocks, Dividends, Bonds or Debentures
</li>
<li>
Life Insurance Accounts
</li>
<li>
Escrow Accounts
</li>
<li>
Negotiable Instruments, Certified Checks, Money Orders, or Travelers Checks.
</li>
<li>
Safe Deposit Box Contents
</li>
<li>
Business Accounts
</li>
<li>
Corporation/Business Entity/Partnership
</li>
<li>
Governmental Agency Accounts
</li>
<li>
Miscellaneous Accounts
</li>
</ul>
</nav>
</a>
<br>
<br>
<br>
</div>
enter image description here
Nest your code in a body and use margin: 0; in your stylesheet. See below.
.black {
background-color: black;
font-size: 20px;
}
body {
margin: 0;
}
li {
color: white;
}
<body>
<div class="black">
<hr>
<h2 class="white">Documentation Examples</h2>
<a>
<ul class="documentations">
<li>
Savings or Checkings Accounts
</li>
<li>
Stocks, Dividends, Bonds or Debentures
</li>
<li>
Life Insurance Accounts
</li>
<li>
Escrow Accounts
</li>
<li>
Negotiable Instruments, Certified Checks, Money Orders, or Travelers Checks.
</li>
<li>
Safe Deposit Box Contents
</li>
<li>
Business Accounts
</li>
<li>
Corporation/Business Entity/Partnership
</li>
<li>
Governmental Agency Accounts
</li>
<li>
Miscellaneous Accounts
</li>
</ul>
</nav>
</a>
<br>
<br>
<br>
</div>
</body>
div tag always have margin and you have to remove it with margin : 0. and if you want to display black background-color on your entire screen you have to give height: 100vh
.black {
background-color: black;
font-size: 20px;
color: white;
height: 100vh;
}
.body {
margin: 0;
padding: 0;
}
Your code is correct, but you need to wrap the css in <style type="text/css">...</style> tags.
This should be in the <head>...</head> tag on your page:
<head>
<!-- title and other things go here -->
<style type="text/css">
.black {
background-color: black;
font-size: 20px;
}
</style>
</head>
You should remove all the paddings and margins by adding margin:0 and padding:0. Like this:
body {
padding: 0;
margin: 0;
}
This would remove all the paddings and margin so the background will be fully covered.
Hello im trying to use a customer image as a list marker through css, this is my code
<li class="unorderedList">
Bread
<ul>
<li> brown </li>
<li> white </li>
</ul>
</li>
<li> Milk </li>
<li> Butter </li>
<li> Onions </li>
<li> Coriander </li>
the image isnt loading onto the webpage as my list marker, this is the css i used.
div.unorderedList { border-style: solid;
padding: 10px; }
li.unorderedList { list-style-image: url('..\images\marker.png');}
I would recommend not to use the list-style-image property. Instead i would use an image tag. Example:
.list-image {
list-style: none;
padding: 0;
}
.list-image li img{
height: 15px;
width: auto;
margin-right: 5px;
}
<ul class="list-image">
<li><img src="https://cdn.iconscout.com/icon/free/png-256/right-1478289-1251141.png" alt=""> brown </li>
<li><img src="https://cdn.iconscout.com/icon/free/png-256/right-1478289-1251141.png" alt=""> white </li>
</ul>
But to answer your question directly. You did not target your list.
li.unorderedList ul would be the solution.
I'm trying to create a footer kind of like this one here
Right now the issue I'm having is getting the content to sit beside eachother instead of stacked on top of eachother.
I've tried using display:flex but that moves everything, including text I want to stay in place, and that isn't the result I'm aiming for, so I'm not sure what to try next.
.footer {
background-color: #EB5931;
color: white;
padding-left: 30px;
padding-bottom: 10px;
padding-top: 10px;
}
.pleft {
width: 20%;
color: rgba(255, 255, 255, 0.74);
}
<div class="footer">
<h3 class="footerleft">THE DESIGN PROCESS</h3>
<p class="pleft">The design process includes many different parts, each used in their own way.
</p>
<ul class="footernav">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DESIGNS
</li>
<li>
HELP
</li>
</ul>
<h3 class="contactus">CONTACT US</h3>
<ul class="contactinfo">
<li>
info#designer.com
</li>
<li>
123-456-7890
</li>
<li>
101-101-1010
</li>
</ul>
<hr>
</div>
If anyone can help me figure this out, it'd be greatly appreciated.
used display:flex
.footer {
background-color: #EB5931;
color: white;
padding-left: 30px;
padding-bottom: 10px;
padding-top: 10px;
display: flex;
}
.pleft {
/* width: 20%; */
color: rgba(255, 255, 255, 0.74);
}
.footer div {
width: 33.333%}
<div class="footer">
<div>
<h3 class="footerleft">THE DESIGN PROCESS</h3>
<p class="pleft">The design process includes many different parts, each used in their own way.
</p>
</div>
<div>
<ul class="footernav">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DESIGNS
</li>
<li>
HELP
</li>
</ul>
</div>
<div>
<h3 class="contactus">CONTACT US</h3>
<ul class="contactinfo">
<li>
info#designer.com
</li>
<li>
123-456-7890
</li>
<li>
101-101-1010
</li>
</ul>
</div>
<hr>
</div>
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 have two headers enclosed inside one div. The div background color fills the first header but not the second. Why is this? I would assume that putting two divs inside one div would cause them to inherit the background color. I have done this before without problems. Thank you.
<div id="contain">
<header id="head_1">
<img src="images/Logos/Actlogo.png"/>
<p> P.O. Box 4524 </br>
Wattville </br>
</br>
(203) 444 - 4444 </br>
www.Acts4Peace.com
<p>
</header>
<!-- menu and statement -->
<header id="head_2">
<p>Keeping Families Warm in Winter</p>
<ul> <!-- main menu -->
<li> Furniture
<ul> <!-- submenu -->
<li> Couches </li>
<li> Chairs </li>
<li> Tables </li>
</ul>
</li>
<li> Clothing
<ul> <!-- submenu -->
<li> Women </li>
<li> Men </li>
<li> Kids </li>
</ul>
</li>
<li> Kitchen
<ul> <!-- submenu -->
<li> Utensils </li>
<li> Blenders </li>
<li> Baking </li>
</ul>
</li>
</ul>
</header>
#contain { /* main wrapper */
width: 1200px;
background-color: tan;
margin: auto;
}
#head_1 p { /* mailing address floated right */
float: right;
text-align: right;
font-size: 11pt;
}
#font-face {
font-family: cursive;
src: url(C:/Windows/Fonts/Cursive standard.ttf);
}
#head_2 p { /*second header paragraph, business mission*/
float: right;
font-family: "cursive standard";
font-size: 26pt;
}
Instead of using the header tag twice, I would put the two elements in separate divs, withing one . Then change the background of either , or the two divs inside.
<div id="contain">
<header>
<div id="head_1">
<img src="images/Logos/Actlogo.png"/>
<p> P.O. Box 4524 </br>
Wattville </br>
</br>
(203) 444 - 4444 </br>
www.Acts4Peace.com
<p>
</div>
<!-- menu and statement -->
<nav>
<p>Keeping Families Warm in Winter</p>
<ul> <!-- main menu -->
<li> Furniture
<ul> <!-- submenu -->
<li> Couches </li>
<li> Chairs </li>
<li> Tables </li>
</ul>
</li>
<li> Clothing
<ul> <!-- submenu -->
<li> Women </li>
<li> Men </li>
<li> Kids </li>
</ul>
</li>
<li> Kitchen
<ul> <!-- submenu -->
<li> Utensils </li>
<li> Blenders </li>
<li> Baking </li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
#contain { /* main wrapper */
width: 1200px;
background-color: tan;
margin: auto;
}
#head_1 p { /* mailing address floated right */
float: right;
text-align: right;
font-size: 11pt;
}
#font-face {
font-family: cursive;
src: url(C:/Windows/Fonts/Cursive standard.ttf);
}
nav p { /*second header paragraph, business mission*/
float: right;
font-family: "cursive standard";
font-size: 26pt;
}
header {
background-color:#;
}
Although I can't recreate your issue (perhaps the window in JSFiddle isn't big enough), from your comment to Adam Ciardelli it appears this is a float issue. You can set overflow:hidden on .contain or use a clearfix:
#contain { /* main wrapper */
width: 1200px;
background-color: tan;
margin: auto;
overflow: hidden;
}
FIDDLE