I have this html code sample. When I write an internal css as follows it works fine. But when I implement it with a ID selector it won't.
The problem is picture size is more than it should be.
Here's the code without ID selector
<!DOCTYPE html>
<html>
<head>
<title>Omicron.com</title>
</head>
<body>
<div>
<img src="Header.png" alt="Header not Found" style="width:100%;min-width:10px;height:auto;position:relative;top:50px;">
</div>
</body>
</html>
and here's the code with ID selector and here's its preview
<!DOCTYPE html>
<html>
<head>
<title>Omicron.com</title>
<style>
#headerImage{
width: 100%;
min-width: 10px;
height: 50px;
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div id="headerImage">
<img src="Header.png" alt="Header not Found">
</div>
</body>
</html>
Can anyone tell me what am I doing wrong?
Your div with id="headerImage" is the #headerImage element. In the first example, you applied styles to the img. So in the second example, you're applying styles to the div. To apply styles to the img inside of #headerImage use #headerImage img as your selector.
<!DOCTYPE html>
<html>
<head>
<title>Omicron.com</title>
<style>
#headerImage img {
width: 100%;
min-width: 10px;
height: 50px;
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div id="headerImage">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Header not Found">
</div>
</body>
</html>
You need to target the image, not its parent div.
#headerImage img{
width: 100%;
min-width: 10px;
height: 50px;
position: relative;
top: 50px;
}
Related
.text{
width: 50px;
font-size: 27px;
float: left;
font-weight: bold;
}
.image{
width: 30%;
height: 100%;
clear: left;
float: right;
}
.parent{
background-color: pink;
height: 350px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="schrott.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="parent">
<p class="text">ihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnii</p>
<img src="Pictures\—Pngtree—triangle neon color glowing border_4072770.png" class="image">
</div>
</body>
</html>
My wish would be to move the text next to the image. I have put these two inside a div and floatet the image right, but now i cant move the text down with margin-op?why and what could i improve?
Here is an example to point you in the right direction: https://jsfiddle.net/h5o607e1/1/
The biggest thing for you to look at here is the position and display settings for both the text and image: position: relative; and display: inline-block;
What about using a flexbox (display: flex):
.text{
width: 49%;
word-wrap: break-word;
margin: 0;
align-self: center; /*Vertically align text*/
}
.image{
width: 49%;
height: 100%;
background-color: red; /*for illustration*/
}
.parent{
background-color: pink;
height: 350px;
display: flex;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="schrott.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="parent">
<p class="text">ihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnii</p>
<img src="Pictures\—Pngtree—triangle neon color glowing border_4072770.png" class="image">
</div>
</body>
</html>
This is CSS, level 1 people: just use float. The value for float is left, right or none (float on Mozilla Developer Network). The order of the elements should have an effect too.
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: left;" />
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: right;" />
<img alt="Placeholder" src="4072770.png" style="float: left;" />
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: right;" />
<p>Placeholder...</p>
Also don't put spaces or uppercase letters in URLs until you get more advanced or you'll create more headaches than it's worth.
#div {}
img {
height: 200px;
}
#img1 {
float: left;
}
#img2 {
float: right;
}
#img3 {
float: right;
}
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
Currently, when you shrink the screen horizontally, the images start stacking vertically, which I don't want, I want them to all stay on the same horizontal line.
I'm looking how to do the following things:
Make an image disappear when it starts overlapping another image.
Make the images push to the right past the vertical scroll bar when the images start to overlapping.
The reason I ask for both is because I've now got two projects where each require one of those two and I don't know how to do it :P
I'd also like to avoid #media only screen and (max-width: ---px) if possible.
You need to add separate div for each image, and arrange it by display: flex element. Also use margin for align contents inside the flex div.
#div {
display: flex;
}
.new {
max-height: 200px;
}
.left {
margin-right: auto;
}
img {
max-width: 100%;
max-height: 200px;
}
#media (max-width: 768px) {
.hidden-xs {
display:none;
}
}
<div id="div">
<div class="new left">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
</div>
<div class="new hidden-xs">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="new">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</div>
Try this code
#div::after {
display: table;
content: "";
clear: both;
}
#div img {
float: left;
width: 33.33%;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
Try this Code::
ul.img {
margin: 0;
padding: 0;
white-space: nowrap;
width: 500px;
overflow-x: auto;
}
ul.img li {
display: inline-block;
width: 200px;
height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
</head>
<body>
<ul class="img">
<!-- Inline styles added for demonstration purposes only. -->
<li style="background-color: #000"></li>
<li style="background-color: #cdc"></li>
<li style="background-color: #fed"></li>
</ul>
</body>
</html>
try this code, And modify your image height according to need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
<style>
#div {
display: flex;
flex-wrap: wrap;
}
#div img{
width: 33.33%;
height: 200px;
}
</style>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
The problem is you are using a float for positioning.
Floats will automatically move to a new line when their containers becomes too small.
You could either set the size of the image container to a width of 600px with no resize in which your images would remain in place when the window becomes smaller.
Or you could use the fixed position which is what I would go for.
#img1 {
position: fixed;
width:200px;
left: 0px;
top: 0px;
border: 0px;
padding: 0px;}
#img2 {
position: fixed;
width:200px;
left: 200px;
top: 0px;
border:0px;
padding: 0px;}
#img3 {
position: fixed;
width:200px;
left: 400px;
top: 0px;
border: 0px;
padding: 0px;}
If you dont care about image resize, set the div with a minimum width of a total px sum of the image widths. That way you have less containers.
I can not see side2.html below the side1.html
page.html should scroll, side1.html and side2.html should be always visible, side1 above side2.
page.html
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<style type="text/css">
<!--
body.container {
width: 100%;
height: auto;
}
.maintext {
float: right;
width: calc(100% - 210px);
}
iframe.side1 {
position: fixed;
float: left;
height: 600px;
width: 200px;
}
iframe.side2 {
position: fixed;
float: left;
top: 300px;
height: 300px;
width: 200px;
}
-->
</style>
</head>
<body>
<a name="topw" id="toppage"></a>
<div class="container">
<div class="maintext">
<a name="dic"></a><h3> Dict</h3><br/>
</div>
<iframe class="side1" src="side1.html" frameborder="0" />
<iframe class="side2" src="side2.html" frameborder="0" />
</div>
</body>
</html>
side1.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a class="menu" target="_parent" href="page.html#dic" title="title" > title </a>
</body>
</html>
side2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a target="_blank" href="http://www.ubuntu.com" title="org">.org</a>
</body>
</html>
Or could I solve the problem just with div, without iframe. Something like here. But I can not make it work: side1 above side2
Position fixed needs positioned elements top/right/down/left to reference it's offset. float will not work on fixed elements.
I have also change the height and offset of the elements so they will fill the users screen no matter what size it is.
Also as #Sim pointed out iframes are now self closing and should have a proper closing tag.
body.container {
width:100%;
}
.maintext {
min-height:1080px; /*to simulate content*/
width:100%;
box-sizing:border-box;
padding-left:200px;
background:#ddd;
}
.side1,
.side2{
position: fixed;
left:0;
width:200px;
}
iframe.side1 {
top:0;
height:70%;
}
iframe.side2 {
top:70%;
height:30%;
}
<div class="container">
<div class="maintext">
<a name="dic"></a><h3>Middle Div</h3><br/>
</div>
<iframe class="side1" src="side1.html" frameborder="0"></iframe>
<iframe class="side2" src="side2.html" frameborder="0"></iframe>
</div>
you should close your iframes with </iframe>, because they aren't empty elements (to deal with browsers that do not support <iframe>, you could add a text between the opening and the closing tag of the iframe): https://www.w3.org/wiki/HTML/Elements/iframe
use top and left to position absolute when your element is position: fixed
I've modified your code (see comments):
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<style type="text/css">
body.container {
width: 100%;
}
.maintext {
float: right;
width: calc(100% - 210px);
}
iframe.side1 {
position: fixed;
left: 0; /* use absolute positions when position fixed, not float */
top: 0;
height: 300px; /* 300px is enough, else it is behind your second iframe*/
width: 200px;
}
iframe.side2 {
position: fixed;
left: 0;
top: 300px;
height: 300px;
width: 200px;
}
</style>
</head>
<body>
<a name="topw" id="toppage"></a>
<div class="container">
<div class="maintext">
<a name="dic"></a><h3> Dict</h3><br/>
</div>
<!-- always add a closing tag to your iframes -->
<iframe class="side1" src="side1.html" frameborder="0" ></iframe>
<iframe class="side2" src="side2.html" frameborder="0" ></iframe>
</div>
</body>
</html>
I hope that solve your problem...
This is my code. I have done the CSS and the HTML code so that this logo image that I have moves to the right.
However, the image remains still. What am I doing wrong?
HTML CODE:
#logo {
width: 200px;
height: 200px;
position: absolute;
top: 0px;
right: 200 px;
border: 25px black;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<div id="logo">
<img src="LogoSIEM.PNG" alt="logo" style="width:200px;height:200px">
</div>
</body>
</html>
Change right: 200 px; to right: 200px;
The space before px is invalid, so it doesn't recognize it as being 200px from the right.
add:
body {
position:relative;
}
Use float:right instead of what you have tried to do in your css....
#logo {
width: 200px;
height: 200px;
border: 25px black;
float:right;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<div id="logo">
<img src="LogoSIEM.PNG" alt="logo" style="width:200px;height:200px">
</div>
</body>
</html>
My html page is:
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
My css file is:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
display: block;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
But the content div is not centered properly.
I am using IE7 to view this page.
You should add a <!doctype> to the beginning of your document, also remove the display: block; from your div selector, a div is by default a block level element so this declaration has no meaning. (this won't break the layout, it just makes no sense to tell an already block level element to be block again.)
Other than that, your CSS is perfectly fine :)
HTML:
<!doctype html>
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
http://jsfiddle.net/u5w8F/
For IE 7 quirksmode (and IE 6) you can add
html, body{
text-align: center;
}
div#content{
text-align: left;
}
to center the div... (old skool)