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.
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>
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.
I am tinkering with a basic site I plan to host my blog on in the future and I cannot manage to get one of my div elements to align with the rest of the site properly. I have linked to the project on CodePen below. I cannot seem to eliminate the white space between .header and .main. I had thought simply making the display: inline-block and keeping the margin/padding/border small would do the trick but I am obviously mistaken. Thoughts?
http://codepen.io/Kpmfastball/pen/xOvBNB
Below is the CSS for .main, the div class I am struggling with, and .heading, which is the div located right above it on the webpage.
.main {
display: inline-block;
height: 800px;
width: 82%;
margin: 1px;
padding: 1px;
border-width: 1px;
font-family: times;
background-color: #29BA91;
}
.heading {
display: block;
font-family: times;
width: auto;
height: 150px;
border-width: 1px;
border-color: black;
margin: 1px;
padding: 1px;
background-color: #0F8CB2;
color: #ffffff;
}
Just put this in .main:
vertical-align: top;
try to use HTML5 tags and also why don't you use css frameworks like Bootstrap or Foundation?
it's a lot that you should do to make your website responsive. you're code was a little bit messy so i cleaned it up for you..
h1 {
font-size: 50px;
text-align: left;
}
HEADER {
display: block;
font-family: times;
width: auto;
height: 150px;
border-width: 1px;
border-color: black;
margin: 1px;
padding:1px;
background-color: #0F8CB2;
color: #ffffff;
}
MAIN{
display: flex;
justify-content: space-between;
}
.nav {
display: flex;
width: 200px;
font-family: times;
height: 900px;
border-width: 1px;
border-color: black;
margin: 1px;
padding: 1px;
background-color: #0A6D37;
color: #ffffff;
}
.main {
display: flex;
flex:1;
height: 900px;
margin: 1px;
padding: 1px;
border-width: 1px;
font-family: times;
background-color: #29BA91;
}
.link1 {
color: #ffffff;
}
<html>
<head>
<title>A-Not-So-Well-Respected Man Blog</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1 style="padding: 5px; border: 5px; margin: 5px">A-Not-So-Well-Respected Man</h1>
<h5>Random Thoughts and Musings</h5>
</header>
<main>
<div class="nav">
<h3 align="center">Menu</h3>
<ul>
<li>Posts A-Z</li>
<li>Posts By Tag</li>
<li>Newest Posts</li>
<li>About Me</li>
</ul>
</div>
<div class="main">
<a class="link1" href="https://anotsowellrespectedman.wordpress.com/2016/02/14/love-and-brutality-a-history-of-february-14th/">Latest blog post</a>
</div>
</main>
</body>
</html>
Hope it helps...
you can add float:left; to class nav and class main, it will be like this:
.nav {
display: inline-block;
font-family: times;
width: 200px;
height: 900px;
border-width: 1px;
border-color: black;
margin: 1px;
padding: 1px;
background-color: #0A6D37;
color: #ffffff;
float:left;
}
.main {
display: inline-block;
height: 800px;
width: 82%;
margin: 1px;
padding: 1px;
border-width: 1px;
font-family: times;
background-color: #29BA91;
float:left;
}
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.