By registering with us, you'll be able to discuss, share and private message with other members of our community.
SignUp Now!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#main{
width: 650px;
height: 350px;
margin: auto;
}
p{
font-weight: bolder;
font-size: larger;
}
div {
height: 300px;
}
#logo {
background-color: azure;
width: 200px;
float: left;
text-align: center;
}
#header-tekst {
background-color: burlywood;
width: 400px;
height: 100px;
text-align: center;
float: right;
}
#header-bottom {
background-color: cadetblue;
width: 360px;
height: 200px;
padding: 20px;
float: right;
}
</style>
</head>
<body>
<div id="main">
<div id="logo">
<p><img src="logo.jpg" alt="Logo" width="150" height="148"></p>
<p>Welcome</p>
<p>Welkom</p>
</div>
<div>
<div id="header-tekst">
<h1>Dit is h1 header tekst</h1>
</div>
<div id="header-bottom">
<p>The world, as we know it, is about to end! Run for cover</p>
</div>
</div>
</div>
</body>
</html>
That is an interesting approach, I had not thought of that: limit the main div width and right float the two adjacent div's. Thank you for that idea!Your title, which wants a <p> floated left, and your codepen, which floats a div left, sends mixed signals. I went with your codepen.
I normally don't recommend setting heights, but this is needed here.
I suspect it's for training because you tied our hands and made this harder than it needed to be.
So, I believe an explanation as to how I did it is needed. I made the three divs and colored them to see how they reacted to my CSS. I used VSCode and the Go Live extension.
Here's what I came up with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#main{
width: 650px;
//height: 350px;
margin: auto;
}
p{
font-weight: bolder;
font-size: larger;
}
#logo {
background-color: azure;
width: 200px;
float: left;
text-align: center;
}
#header-tekst {
background-color: burlywood;
width: 400px;
text-align: center;
float: right;
}
#header-bottom {
background-color: cadetblue;
width: 360px;
height: 200px;
padding: 20px;
float: right;
}
#header-tekst p{
display: none;
}
#header-tekst a{
border: 1px black solid;
padding: 5px;
position: relative;
top: -15px;
}
#header-tekst a:hover ~ p{
display: block;
}
</style>
</head>
<body>
<div id="main">
<div id="logo">
<p><img src="logo.jpg" alt="Logo" width="150" height="148"></p>
<p>Welcome</p>
<p>Welkom</p>
</div>
<div>
<div id="header-tekst">
<h1>Dit is h1 header tekst</h1>
<a>Hover and see</a>
<p class="taal-en">Welcome-en</p>
<p class="taal-fr">Bienvenu-fr</p>
<p class="taal-nl">Welkom-nl</p>
</div>
<div id="header-bottom">
<p>The world, as we know it, is about to end! Run for cover</p>
</div>
</div>
</div>
</body>
</html>
Hi Oldman, changes applied yet the 3 language texts still not visible, at hover neither. Where would they be gone?I did not know the <p> element supported the width and height attributes.
My revised code. I removed the style for the div{height: 300px;}. And the height: 250px; in #header-tekst so it can grow.
That is an interesting question, honestly: I thought this necessary because of the class and size statements. Absolutely right: I had the wrong presumption.Why would you even put an image in a <p> element, instead of <img>?
Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.
We use essential cookies to make this site work, and optional cookies to enhance your experience.