I am creating website for my school (its something like match) but I am stuck on one thing :/ . I am trying to inline 2 images. One is for decoration and secound is like board for text. And its working but border is not comming down O.o and its under a div main (glavendrzac on my language) . Margin is working but border not. Its only "bordering" around logo :/ (See image below.)
http://prntscr.com/b0qtw7
<html>
<head>
<meta charset="UTF-8"/>
<title>ООУ "Јосип Броз Тито"</title>
<link rel="stylesheet" type="text/css" href="stilovi.css">
</head>
<body>
<div id = "glavendrzac">
<div class = "logopozicija">
<img src="sliki/logo.png"/>
</div>
<div id = "sliki">
<div class = "profesor">
<img src="sliki/profesor.png" width="270px"; height="450px";/>
</div>
<div id = "tabla">
<div class = "tablatekst">
test
</div>
</div>
</div>
</div>
<?php
//
?>
</body>
</html>
And this is CSS code
body
{
margin: 10px;
}
#glavendrzac
{
margin-left: 200px;
margin-right: 200px;
border: 2px solid black;
border-radius: 8px;
}
#sliki
{
}
.profesor
{
float:left;
}
#tabla
{
margin-top:50px;
float:right;
margin-left:30px;
border: 0px solid black;
border-radius:20px;
width: 800px;
background: url("sliki/tabla.png");
background-size: cover;
}
.tablatekst
{
margin-top: 30px;
margin-left: 40px;
margin-bottom: 30px;
margin-right: 40px;
}
Can someone help me :) IDK whats wrong.
If you add overflow: auto to the #glavendrzac then the floats will be contained within the containing div, which I think is what you need.
You will need to think about the widths of the various child elements to make sure that the professor image and text box fit within the parent container.
The CSS concept involved here is known as a block formatting context.
Reference: https://www.w3.org/TR/CSS2/visuren.html#block-formatting
#glavendrzac {
margin-left: 200px;
margin-right: 200px;
border: 2px solid black;
border-radius: 8px;
overflow: auto;
}
#sliki {}
.profesor {
float: left;
}
#tabla {
margin-top: 50px;
float: right;
margin-left: 30px;
border: 1px solid black;
border-radius: 20px;
}
.tablatekst {
margin-top: 30px;
margin-left: 40px;
margin-bottom: 30px;
margin-right: 40px;
}
<div id="glavendrzac">
<div class="logopozicija">
<img src="http://placehold.it/50x50" />
</div>
<div id="sliki">
<div class="profesor">
<img src="http://placehold.it/100x450" width="100px" ; height="450px" ;/>
</div>
<div id="tabla">
<div class="tablatekst">
test (this needs some work)
</div>
</div>
</div>
</div>
Related
I have been struggling to make right alignment and responsive. i want to add some of the test on top of the image. i have try changing values in css but it doesnt work out. i want to make as it below:
codepen: codepen link
Please advise. i am new to bootstrap.
<html>
<head>
<link data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" style="background: white;">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent" >
<div class="circle">1</div>
<div class="expenseItems">Mobile</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent" >
<div class="circle">2</div>
<div class="expenseItems">Select a Product Category</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-4">
<div class="parent" >
<img src="http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png" class="tabimg" alt="">
<div class="circle tag" style="background-color:darkblue">3</div>
<div class="expenseItems">Find the latest software, firmware, and drivers<font color="darkblue"></font></div>
</div>
</div>
<div class="col-sm-2">
<div class="parent" >
<div class="circle">4</div>
<div class="expenseItems">Tablet Use</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
.parent {
border: 1px;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: gray;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: gray;
font-size: 24px;
}
.hr {
background: gray;
height: 2px;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 15px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}
.tabimg {
padding : 0px 0px 0px 0px;
height: 30px;
width: 100px;
margin-top: 0px;
}
The easiest approach to this would be just setting a background image to the div
in question.
I've added an ID to the div you're trying to add the image to, and I added the following code for that div.
#box-with-image {
background: url(http://images.clipartpanda.com/baby-blue-border-clipart-8748-light-blue-square-clip-art.png);
background-size: contain;
background-repeat: no-repeat;
/*
OTHER OPTION:
background-size: cover;
*/
}
Full Codepen Link
For sizing, contain will position the image top left, and fill whichever dimension is smallest. cover will fit whichever dimension is largest.
Or in other words, in a non-square shaped div, contain will leave whitespace, while cover will cut some of the image off.
Another approach to this would be using the following CSS on the image
img {
position: relative;
top: 0;
left: 0;
width: 100%;
}
A <p> tag, that is supposed to be inside a <div> tag in code, is stacked under it when the website shows.
The paragraph with id "p1" needs to be displayed inside the div with id "text".
I'd like to draw your attention to the three big boxes to the left of the screen.
Box 1: This box is empty.
Box 2: This is the one that says 'Career'.
Box 3: The box under is the div I'm having problems with. The text just below it is the text that needs to be in the div. This div's id is "text", and the one it should look similar to is "main".
#banner {
background-color: #FFFFFF;
float: left;
width: 30%;
height: 71px;
border: 2px solid;
}
#button {
background-color: #FFFFFF;
border: 2px solid;
float: left;
width: 15%;
height: 71px;
}
#fixbutton {
background-color: #FFFFFF;
border: 2px solid;
float: left;
width: 15%;
height: 71px;
}
#main {
background-color: #FFFFFF;
height: 204px;
width: 23%;
float: left;
border: 2px solid;
}
#picture {
background-color: #FFFFFF;
height: 575px;
width: 55%;
float: left;
border: 2px solid;
}
#text {
background-color: #FFFFFF;
height: 650px;
width: 23%;
border: 2px solid;
text-align: center;
}
#additionaltext {
background-color: #FFFFFF;
height: 575px;
width: 21%;
float: right;
border: 2px solid;
}
#p1 {
text-align: center;
font-size: 150%;
}
#button:hover {
background-color: #ffff99;
}
#fixbutton:hover {
background-color: #ffff99;
}
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>
</title>
</head>
<body>
<div id="banner" id="banner"></div>
<a href="index.html">
<div id="button">
<p id="p1">Home</p>
</div>
</a>
<a href="about.html">
<div id="button">
<p id="p1">About Me</p>
</div>
</a>
<a href="career.html">
<div id="button">
<p id="p1">Career</p>
</div>
</a>
<a href="school.html">
<div id="fixbutton">
<p id="p1">Schooling</p>
</div>
</a>
<div id="main">
<p align="center" style="font-size:400%">Career</p>
</div>
<div id="picture">
<img height="575" width="751" src="4-photos.jpg" />
</div>
<div id="additionaltext"></div>
<!-- THE DIV -->
<div id="text">
<!-- THE PARA -->
<p id="p1">My dream career would be art. I really want to be able to draw concept art, background art, storyboards, character art, and animate 2D (and maybe 3D) assets as well.</p>
</div>
</body>
</html>
Try removing the Div with Id="text" the put the P tag with ID p1 into the id="additionaltext". and in your css remove the style for the ID text.
I tried it and it worked fine
JSFiddle
<div> All divs of the line </div>
<div> All divs in the next block</div>
It is better to allways create divs for each line and then you can style their widths relativly to its parent div so they have for example to sum up 100% in width when they are placed one by one.
Your use of the float property changes how the DOM layout appears on the screen.
Some resources you should review to help understand what is happening:
http://www.w3schools.com/css/css_float.asp
https://css-tricks.com/all-about-floats/
Problem 1: I'm trying to get my div boxes to have the same width regardless from text length I use (I will use max 2 digits), but I can't get it to work.
Problem 2: The target platform is mobile and when the linewraping occurs the "boxes" positions right under the text from the text on the line above (the borders crosses each other).
The reson for using div "groups" is that a javascript is going to change the value of 4 boxes at a time.
<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
white-space: normal !important;
}
.online {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #00CC00;
width: 20px;
text-align: center;
padding: 2px;
display: inline;
}
.test {
display: inline;
}
</style>
</head>
<body>
<div id="A1-result" class="test">
<div class="online">0</div>
<div class="online">1</div>
<div class="online">2</div>
<div class="online">3</div>
</div>
<div id="A2-result" class="test">
<div class="online">4</div>
<div class="online">5</div>
<div class="online">6</div>
<div class="online">7</div>
</div>
<div id="A3-result" class="test">
<div class="online">8</div>
<div class="online">9</div>
<div class="online">10</div>
<div class="online">11</div>
</div>
<div id="A4-result" class="test">
<div class="online">12</div>
<div class="online">13</div>
<div class="online">14</div>
<div class="online">15</div>
</div>
</body>
</html>
Change display:inline property to display:inline-block. Read more about the difference between inline and inline-block.
.online {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #00CC00;
width: 20px;
text-align: center;
padding: 2px;
display: inline-block;
}
.test {
display: inline-block;
}
DEMO
I've got a bunch of divs, one after the next, each with an image inside it. When I set min-height to a value higher than the height of the image, everything works fine:
But if I have it set to 50px while the image is 100+px, the images kind of "cascade"
What can I do to force the div to be at least as tall as the image inside it?
CSS
body {
background: #cccccc;
margin: 0px;
}
a {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
}
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
}
.post {
padding-top: 10px;
/*background-color: #ff0000;*/
}
.postimage {
float: left;
padding-right: 10px;
}
.postcomment {
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="reply">
One
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Two
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Three
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
<div class="reply">
Four
<div class="post">
<img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
</div>
</div>
</body>
</html>
Add clear: left to your div.
See this?
.postimage {
float: left;
padding-right: 10px;
}
When you float the contents of the div, the div does not stretch vertically to accommodate.
So, adding this:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
clear: left;
}
Will resolve the issue.
Alternate solution
Another solution which I tend to prefer is to use the overflow hack, rather than clear:
.reply {
min-height: 50px;
padding: 10px;
background-color: #eeeeee;
font-size: 14px;
margin: 10px;
width: 100%;
overflow: hidden;
}
You would expect that this would hide the part of the image below the div, but it has a different result: The overflow: hidden does not hide the contents, but rather causes the div to stretch down to contain the entire image.
Note: for this method to work on older browsers, you must specify a width (notice that I added that in the css above).
I have a layouting problem while using this html/css coding.
Actually I want the symbols to be vertically aligned to the center of the div.
The second layout is displaying fine with float value set to left on child divs.
Whats wrong with the first layout. Any ideas?
Here is the code
<html>
<head>
<style type="text/css">
div, p {
margin:0;
padding:0;
}
div.wrapper {
background: #FFFFFF;
border-radius: 3px;
padding: 20px;
}
/* LAYOUT 1 STYLE */
div.list1 div {
display: inline-block;
}
div.thumb1 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol1 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
/* LAYOUT 2 STYLE */
div.list2 {
overflow: hidden;
}
div.list2 div {
float: left;
}
div.thumb2 {
border:#3C6BBC 2px solid;
border-radius: 2px;
width: 120px;
height: 120px;
}
div.symbol2 {
font-size: 25px;
width: 20px;
height: 70px;
margin: 2px;
text-align: center;
padding-top:50px;
}
</style>
</head>
<body>
<div class="wrapper" id="layout1">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list1">
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>+</p></div>
<div class="thumb1"></div>
<div class="symbol1"><p>=</p></div>
<div class="thumb1"></div>
</div>
</div>
<div class="wrapper" id="layout2">
<h1>MAIN HEADING</h1>
<h2>Sub Heading</h2>
<div class="list2">
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>+</p></div>
<div class="thumb2"></div>
<div class="symbol2"><p>=</p></div>
<div class="thumb2"></div>
</div>
</div>
</body>
</html>
Just give vertical-align:middle to your to mentioned below class
div.list1 div {
display: inline-block;
vertical-align: middle;
}
Demo