body {
margin: 0;
}
.header {
width: 80%;
height: 20%;
margin-left: 10%;
position: fixed;
top: 0;
border-style: solid;
border-width: 1px;
background-color: green;
}
.image {
width: 20%;
height: 100%;
float: left;
border-style: solid;
border-width: 1px;
}
.navigation {
width: 79%;
height: 100%;
float: right;
text-align: right;
border-style: solid;
border-width: 1px;
}
li {
height: 100%;
display: inline;
border-style: solid;
border-width: 1px;
background-color: blue;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<li> 1.0 Main Menu </li>
<li> 2.0 Main Menu </li>
<li> 3.0 Main Menu </li>
</nav>
</div>
With the code above I create a <header> consisting of an <image> and a <navigation>. The <image> and the <navigation> match perfectly with the height of the surrounding <header>.
Inside the <navigation> I put some <li> elements and I want them to have the same height as the surrounding <navigation>. Therefore, I gave them the property height: 100%; which I also did for the <image> and the <navigation> but it does not seem to work.
What do I have to change in my code so the <li> elements match the height of the surrounding <navigation> element?
You can also find my code here: https://jsfiddle.net/5jv8m5xf/28/
Change display property of li to inline-block instead of inline and to solve the overlapping divs, you can use box-sizing: border-box for all the elements.
To remove the space between the lis you can set font-size: 0 to the nav and reset it for the li.
See demo below:
*{
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
width: 80%;
height: 20%;
margin-left: 10%;
position: fixed;
top: 0;
border-style: solid;
border-width: 1px;
background-color: green;
}
.image {
width: 20%;
height: 100%;
float: left;
border-style: solid;
border-width: 1px;
}
.navigation {
width: 79%;
height: 100%;
float: right;
text-align: right;
border-style: solid;
border-width: 1px;
font-size: 0;
}
li {
height: 100%;
display: inline-block;
border-style: solid;
border-width: 1px;
background-color: blue;
font-size: initial;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<li> 1.0 Main Menu </li>
<li> 2.0 Main Menu </li>
<li> 3.0 Main Menu </li>
</nav>
</div>
I think you should make "li" display: inline-block to be able to take the full height and make the border-width: 0 because if you make it 1 the "li" will be more height that the nav:
li {
height: 100%;
display: inline-block;
border-style: solid;
border-width: 0px;
background-color: blue;
}
You have to use inline-block instead of inline for the display property for the list element.
Related
How can I inextend the "MAKE YOU BURP" bottom border on the middle? In the right side of the food on plate, I tried to use margin: px; and it did work, but it affects other elements and the responsiveness of the webpage, is there any other way to do this without using margin: px;.
SCREENSHOT
#Main {
background-image: url('pexels-fwstudio-164005.jpg');
background-size: 1000px 700px;
}
#Main img {
width: 440px;
}
#Main #main-content {
display: inline-block;
}
#h2-last {
border-width: thick;
border-bottom: solid;
/*margin-right: 1097px;*/
}
.main-content li, a {
list-style: none;
text-decoration: none;
display: inline;
padding: 10px;
color: black;
font-weight: bold;
}
.main-content ul {
position: relative;
right: 49px;
}
#main-text {
position: relative;
bottom: 300px;
left: 500px;
}
.main-content button {
border-style: solid;
border-radius: 7px;
background: #F2A65A;
padding: 20px 25px 20px 25px;
}
<div id="children-main">
<div class="main-content">
<img src="Fish-Food-Plate-PNG.png" alt="fish in plate">
<div id="main-text">
<h2>BULALOI FOODS</h2>
<h2 id="h2-last">MAKE PEAOPLE BURP</h2>
<ul>
<li>
<button>ORDER</button>
</li>
<li>
<button>MENU</button>
</li>
</ul>
</div>
</div>
</div>
Just make sure the element width is set to fit content
#h2-last {
border-width: thick;
border-bottom: solid;
width: fit-content;
}
<h2 id="h2-last">MAKE PEAOPLE BURP</h2>
I want show a html div wich contains a state-descritpiton with a circle (green or red). This circle shows the state of the enigne in the right corner of the description.
My problem is the following. If the windows size has changed (smaler), the description and the "state-circle" overlap each other.
How can i prevent this?
Do you know how the css-code should be?
structure is mainly this:
.statusdiv{
height: 40px;
}
.statusbeschreibung{
position: absolute;
margin-left: 40%;
}
.statuskreis {
position: absolute;
width: 25px;
height: 25px;
top: 13px;
/*left: 190px;*/
margin-left: 60%;
border: 1px solid black;
text-align: center;
border-radius: 12.5px;
}
.status-on{
background-color: green;
}
.status-off{
background-color: red;
}
<div class="list-block">
<ul>
<li>
<div class="statusdiv">
<p class="statusbeschreibung">Motorstatus</p>
<div name="motorstatus" id="motorstatus" class="item-link statuskreis status-off"></div>
</div>
</li>
</div>
This was based on your original screenshot images of your code: basically you should use display:inline-block instead of position:absolute to prevent your bullet from overlapping your text, and then use a margin-left on the bullet so that it always has enough space between it and the text.
.list-block ul {
padding: 0;
margin: 0;
}
.list-block li {
list-style: none;
}
.statusdiv {
white-space: nowrap;
}
.statusbeschreibung {
margin-left: 40%;
display: inline-block;
vertical-align: middle;
}
.statuskreis {
width: 25px;
height: 25px;
margin-left: 10px;
border: 1px solid black;
text-align: center;
border-radius: 12.5px;
display: inline-block;
vertical-align: middle;
}
.status-on {
background-color: green;
}
.status-off {
background-color: red;
}
<div class="list-block">
<ul>
<li>
<div class="statusdiv">
<p class="statusbeschreibung">Motorstatus</p>
<div name="motorstatus" id="motorstatus" class="item-link statuskreis status-off"></div>
</div>
</li>
<li>
<div class="statusdiv">
<p class="statusbeschreibung">Motorstatus</p>
<div name="motorstatus" id="motorstatus" class="item-link statuskreis status-on"></div>
</div>
</li>
</ul>
</div>
If I'm understanding it correctly, you style the circle with the class "motortatus".
Try to set the width and height in percentages, not in pixels. This should resize the status circle and prevent it from overlapping with the description, except the font of the description doensn't resize at all and fills up the whole div.
I love inline lists for this sort of thing, but you can also do columns in your preferred css framework of choice.
I've styled it so each of the two list items is 50% of the width of the ul container, but you can tweak those as you see fit.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.statusdiv {
list-style: none;
float: left;
margin: 0;
padding: 1em;
width: 100%;
color: #2d2d2d;
}
.statusdiv li {
width: 50%;
float: left;
padding: 0 1em;
}
.statusdiv li:first-child {
text-align: right;
height: 35px;
line-height: 35px;
}
.statusdiv li:last-child {
text-align: left;
}
.circle {
content: "";
background-color: aqua;
width: 35px;
height: 35px;
display: inline-block;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
<!-- EDIT THIS SNIPPET -->
<ul class="statusdiv">
<li>
Status thing:
</li>
<li><span class="circle"></span></li>
</ul>
I want my image to be in my div to the right with my list items on the left. I don't know what I am doing wrong. It just looks weird. The img should also contained within the border.
HTML
<div id ="breturn">
<h3>Returns Policy</h3>
<img src="images/Returns-policy.jpg" alt ="Returns">
<ul>
<li>You have 30 days to return the item.</li>
<li>You must pay shipping in order to recieve a refund.</li>
<li>There are no refunds.</li>
</ul>
</div>
CSS
#breturn
{
border-width: 1px;
border-style: solid;
border-color: white;
padding: 2px;
border-radius: 5px;
height: 500px;
}
#breturn ol
{
margin-left: auto;
margin-right: auto;
}
#breturn img
{
width: 300px;
height: 300px;
float: right;
display: block;
margin: auto;
float: right;
}
place the image after the list and set the display for each as inline-block.
#breturn
{
border-width: 1px;
border-style: solid;
border-color: white;
padding: 2px;
border-radius: 5px;
height: 500px;
}
#breturn ul
{
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#breturn img
{
width: 300px;
height: 300px;
display: inline-block;
margin: auto;
}
<div id ="breturn">
<h3>Returns Policy</h3>
<ul>
<li>You have 30 days to return the item.</li>
<li>You must pay shipping in order to recieve a refund.</li>
<li>There are no refunds.</li>
</ul>
<img src="images/Returns-policy.jpg" alt ="Returns">
</div>
here is a jsfiddle
https://jsfiddle.net/43premwa/
#breturn {
border-width: 1px;
border-style: solid;
border-color: black;
padding: 2px;
border-radius: 5px;
height: 500px;
width: 600px;
}
just give your breturn a width it will sort itself out.
I am trying to create a header that contains an image along with links that will act as a nav menu for users to navigate.I want the layout to look something like this.
However, I cant seem to get the alignment of the nav menu right to vertically align right above the underline in the header.
<header>
<div>
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link1
</li>
<li class="menuitem">
Link2
</li>
</ul>
</nav>
</header>
CSS:
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
#header {
border-bottom: 2px solid black;
}
header {
margin: 0;
background-color: #cccccc;
}
height: 5%;
width: 100%;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
How do I keep the links to the right of the page along with moving them above the border? Any help would be greatly appreciated.
Your CSS snippet has some typos, it probably should be:
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
header {
margin: 0;
background-color: #cccccc;
height: 5%;
width: 100%;
border-bottom: 2px solid black;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
So you need to correct that.
Having a header that is 5% of the height of the page doesn't make a great deal of sense to me, and because the menuitem items are floated right, they don't have any block effect on the header content.
If you gave the header a fixed height that was big enough, e.g. height: 80px; then it would display as you want.
EDIT:
An alternative is to give the menuitems a relative position, then offset the top by the height of the image in the header (it's the only element with a fixed height), and apply the border to the div enclosing the header image (see http://codepen.io/raad/pen/oyncv):
HTML
<header>
<div class="imagecontainer">
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link2
</li>
<li class="menuitem">
Link1
</li>
</ul>
</nav>
</header>
CSS
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
header {
margin: 0;
background-color: #cccccc;
height: 5%;
width: 100%;
}
.imagecontainer {
border-bottom: 2px solid black;
}
.menuitem {
position: relative;
top: -36px;
display: inline;
float: right;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
Add this to your CSS:
#headernav {
float: right;
}
#headernav ul li {
display: inline;
}
This will float the nav to the right and display your list inline so each bullet is side-by-side.
JSFiddle: http://jsfiddle.net/tsukasadt/puf0ws3x/
Please see the following fiddle: http://jsfiddle.net/nfpzzao7/
<header>
<div class="headerimage-container">
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link1
</li>
<li class="menuitem">
Link2
</li>
</ul>
</nav>
</header>
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
#header {
border-bottom: 2px solid red;
}
header {
margin: 0;
background-color: #cccccc;
}
height: 5%;
width: 100%;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
.headerimage-container {
display: inline-block;
}
#headernav {
display: inline-block;
}
#headernav li {
float: left;
margin-right: 10px;
}
I'm almost sure this is going to be a clear: both answer, but the trouble I'm having is where to put it, or how to wrap my head around understanding it.
I have divs within divs, and this particular one (sectioncut) is taking into consideration the height of its cousin ul (subnav). I've tried encapsulating the ul in its own div, but I must not understand how position and clear works yet.
This is my first time posting on Stackoverflow, so any feedback is welcome =D
http://jsfiddle.net/JustJinxed/d62eLh4o/
HTML
<div id="pagecut">
<div id="pagebg">
<div id="nav">
<ul id="subnav">
<li>Home</li>
<li>About</li>
</ul>
<div id="sectioncut">
This is a test.
</div>
</div>
</div>
</div>
CSS:
body,html {
border: 0px;
margin: 0px;
height: 100%;
background-color: #2200FF;
}
#pagecut {
width: 95%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0;
margin-bottom: 0;
background-color: #2200FF;
outline-style: solid;
outline-color:#FF0004;
}
#pagebg {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
background:url(Img/bg1.png);
background-size: 100% auto;
background-repeat:no-repeat;
}
#nav {
width: 98%;
height: 100%;
margin-right: auto;
margin-left: auto;
outline-style: solid;
outline-color:#00FF00;
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav li {
display:inline;
background-color: #7DA5EB;
border-color: #7DA5EB;
color: #FFF;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-style: solid solid none;
padding-right: 7px;
padding-left: 7px;
margin-left: 2px;
margin-right: 2px;
font-size: x-large;
}
#sectioncut {
height: 100%;
background-color: #7DA5EB;
}
If I understand correctly, your problem is that #sectioncut is overflowing its container because it is taking the whole container's height and being pushed down by the other div (#subnav) inside the container.
If that's the problem and you want to fill only the space left by the subnav div, I think How can I make a DIV take up the rest of the height of a container div? will help you.
It's my first time answering aswell so I hope I did it right and this was helpful to you.