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/
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%;
}
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>
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 6 icon, I want to display them as vertically, and before icon there is one red bar, will show the user mouse over effect, something like this :
how can I show this effect in CSS ?
what i try is this :
<div style="width: 20%; float: right";>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Diploma_24.png" title="Education" /></div>
</div>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Medal_24.png" title="Membership" /></div>
</div>
</div>
but by default i dont want to show red bar,
///*/// when mouse over : show red bar icon
when click on icon, :- i also want to remain show red bar , until user don't click on other icons
DEMO: http://jsfiddle.net/gvee/PcgaA/2/
HTML
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
CSS
img {
border-left: 2px solid transparent;
padding-left: 2px;
margin: 5px;
}
img:hover {
border-left-color: red;
}
Here is an example using ::after to create a psuedo element. The div elements will need replaced with img tags.
CSS
.selection{
width: 30px;
height: 30px;
border: 3px solid black;
margin: 4px;
}
.selection:hover::before{
content: ' ';
width: 5px;
background: red;
height: 30px;
display: block;
position: relative;
left: -10px;
}
HTML
<div id="container">
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
</div>
JS Fiddle: http://jsfiddle.net/3RJJe/1/
try this in ur CSS file
CSS styling:
img {margin-left:5px;}
img:hover {border-left:5px solid #f00}
Note: this is just generalized CSS, u will need to have specific CSS syntax.
<div>
<div>
<img src="../../../Images/red_rectangle.png" />
</div>
<div>
<img src="../../../Images/Diploma_24.png" title="Education" />
</div>
</div>
But this would be a better idea:
<ul class="my-menu">
<br>
<li>
<img src="../../../Images/red_rectangle.png" />
</li><br>
<li>
<img src="../../../Images/Diploma_24.png" title="Education" />
</li><br>
</ul>
CSS styling:
.my-menu li img {margin-left:5px; border-left:5px solid #fff}
.my-menu li img:hover {border-left:5px solid #f00}
I am trying to align my 40px40px image to bottom right. I've tried this, worked fine, but if I use another back image, it doesn't fit to bottom right. How can I avoid this problem ?
<div style="width:179px;margin-right:9px;padding-bottom:10px;background-color:white;border:1px solid #c9d2d6;padding:4px;padding-bottom:7px;border-radius:4px;position:relative">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" style="width:179px;" \>
<div style="position:absolute;z-index:5;top:73%;left:75%;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
<div style="border-radius:6px;width:179px;border-top:0px;position:relative;background-color:white;">
<div style="text-align:left;padding-left:6px;padding-right:5px;padding-top:3px;">Fragments by textile artist Lorenzo Nanni (2001) </div>
</div>
</div>
UPDATE:
That said, you should use a mix of CSS and HTML instead:
HTML:
<div class="container">
<div class="picture-container">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" class="background-picture" \>
<div class="avatar">
<img src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
</div>
<div class="container-text">
<div>Fragments by textile artist Lorenzo Nanni (2001)<br />More text</br />Goes here</div>
</div>
</div>
CSS:
.container {
width: 179px;
margin-right: 9px;
padding-bottom: 10px;
background-color: white;
border: 1px solid #c9d2d6;
padding: 4px;
padding-bottom: 7px;
border-radius: 4px;
position: relative;
}
.container .picture-container {
position: relative;
min-height: 60px;
}
.container .background-picture {
width: 179px;
}
.container .avatar {
position: absolute;
z-index: 5;
bottom: 10px;
right: 5px;
width: 40px;
height: 40px;
border: 1px solid #333333;
}
.container .avatar img {
width: 40px;
}
.container .container-text {
border-radius: 6px;
width: 179px;
border-top: 0px;
position: relative;
background-color: white;
}
.container .container-text div {
text-align: left;
padding-left: 6px;
padding-right: 5px;
padding-top: 3px;
}
This also fixed the problem in the comment below.
DEMO
Old post, that explains why you have a problem in the first place and doesn't account for taller text:
In
<div style="position:absolute;z-index:5;top:73%;left:75%;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
instead of
top:73%;left:75%; then use bottom and right like so: bottom: 60px;right: 10px;
Full example:
<div style="width:179px;margin-right:9px;padding-bottom:10px;background-color:white;border:1px solid #c9d2d6;padding:4px;padding-bottom:7px;border-radius:4px;position:relative">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" style="width:179px;" \>
<div style="position:absolute;z-index:5;bottom: 60px;right: 10px;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
<div style="border-radius:6px;width:179px;border-top:0px;position:relative;background-color:white;">
<div style="text-align:left;padding-left:6px;padding-right:5px;padding-top:3px;">Fragments by textile artist Lorenzo Nanni (2001) </div>
</div>
</div>
DEMO
You have to put it inside a container, then make the image a block to avoid the space under it. Note that using properties right & bottom are a better solution than left and top.
http://jsfiddle.net/Ka4r4/