I have a header with links for navigation. Each link is a div, and inside it there is an a link. I want to make each a link fill the vertical and horizontal space of the div.
.TopNav {
position: relative;
border-bottom: 1px solid black;
}
.TopNav-wrapper {
position: relative;
max-width: 1000px;
margin: 0 auto;
background-color: gold;
}
.TopNav-item {
display: inline-block;
width: 100px;
text-align: center;
vertical-align: middle;
display: table-cell;
margin-right: 20px;
border: 1px solid tomato;
height: 72px;
}
.TopNav-a {
background-color: tomato;
color: white;
}
<nav class="TopNav">
<div class="TopNav-wrapper">
<div class="TopNav-item">
<a class="TopNav-a" href="">First</a>
</div>
<div class="TopNav-item">
<a class="TopNav-a " href="">Second</a>
</div>
<div class="TopNav-item">
<a class="TopNav-a" href="">Third</a>
</div>
</div>
</nav>
And a fiddle: https://jsfiddle.net/6rp1canq/
Is this possible?
Change .TopNav-a style in this way:
.TopNav-a {
display: block;
background-color: tomato;
color: white;
height: 72px;
line-height: 72px;
}
You could use flexbox layout:
.TopNav {
position: relative;
border-bottom: 1px solid black;
}
.TopNav-wrapper {
position: relative;
max-width: 1000px;
margin: 0 auto;
background-color: gold;
}
.TopNav-item {
display: inline-block;
width: 100px;
text-align: center;
vertical-align: middle;
display: table-cell;
margin-right: 20px;
border: 1px solid tomato;
height: 72px;
}
.TopNav-a {
background-color: tomato;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<nav class="TopNav">
<div class="TopNav-wrapper">
<div class="TopNav-item">
<a class="TopNav-a" href="">First</a>
</div>
<div class="TopNav-item">
<a class="TopNav-a " href="">Second</a>
</div>
<div class="TopNav-item">
<a class="TopNav-a" href="">Third</a>
</div>
</div>
</nav>
You could just wrap the div in an anchor.
Write the a tag around the div doing <a><div>Test</div></a>
Related
Div element not displaying in line with other 2 div elements present despite having the necessary space for it.
I am attempting to display a web page with 3 separate paragraphs divided into div elements, but the one on the right is seemingly stuck to the bottom of the page unless I remove the center div.
Here is the html:
<div class="Reviews">
<img src="review.jpg" alt="Needledrop Review" class="Review"> Sample Text Sample
</div>
<div class="Sales">
<img src="redcarpet.jpg" alt="JID on the Red Carpet" class="RedCarpet"> Sample Text </div>
<div class="Impact">
<img src="dreamville.jpg" alt="JID with Dreamville members" class="Dream"> Sample
</div>
Here is the CSS for each div element:
div.Reviews {
float: left;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.Review {
vertical-align: text-top;
width: 100%;
}
Number 2:
div.Sales {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.RedCarpet {
vertical-align: text-bottom;
width: 100%;
}
Number 3:
div.Impact {
float: right;
font-size: 1.207em;
border: 1px solid black;
padding: 10px;
width: 255px;
height: 737px;
text-align: justify;
color: white
}
img.Dream {
vertical-align: text-top;
width: 100%;
}
Any help would be appreciated, thank you!
.container {
display: flex;
}
div.Reviews {
float: left;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.Review {
vertical-align: text-top;
width: 100%;
}
div.Sales {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
font-size: 1.207em;
width: 400px;
height: 770px;
text-align: justify;
color: white
}
img.RedCarpet {
vertical-align: text-bottom;
width: 100%;
}
div.Impact {
float: right;
font-size: 1.207em;
border: 1px solid black;
padding: 10px;
width: 255px;
height: 737px;
text-align: justify;
color: white
}
img.Dream {
vertical-align: text-top;
width: 100%;
}
<div class="container">
<div class="Reviews">
<img src="https://www.typinks.com/images/character-sketch-of-friar-laurence-in-romeo-and-juliet.webp" alt="Needledrop Review" class="Review"> Sample Text Sample
</div>
<div class="Sales">
<img src="https://www.typinks.com/images/role-of-fate-in-romeo-and-juliet.webp" alt="JID on the Red Carpet" class="RedCarpet"> Sample Text </div>
<div class="Impact">
<img src="https://www.typinks.com/images/along-with-the-raptors.webp" alt="JID with Dreamville members" class="Dream"> Sample
</div>
</div>
add a parent div with display:flex to align in horizontal
I know a lot of people asked that already but nothing seems to work. I want my footer to be on the bottom of the page. So far it is on the bottom of the screen, but if the page is bigger and you need to scroll, it just sticks there and stays in the middle. If I put position: fixed the footer scrolls with you. I want it to be at the VERY BOTTOM of the page, though, so you have to scroll down to see it in the first place, if the page is too big.
I tried several different wrappers and pushers but nothing seems to work.
You should overthink your layout and read about the HTML box model.
I put all your elements in a wrapper which is position: relative, so the footer with position: absolute can align properly. Also I had to remove position: absolute of .pageframe:
.pagelist {
background-color: deeppink;
position: relative;
float: right;
width: 20%;
height: 70%;
overflow-y: scroll;
margin-right: 10px;
}
.pageimg {
position: relative;
float: left;
width: 100%;
min-height: 500px;
text-align: center;
display: flex;
align-items: center;
}
.pageimg img {
margin: 0 auto;
}
.pagetext {
position: relative;
float: left;
margin-top: 1%;
width: 100%;
text-align: center;
padding-bottom: 10px;
}
.pageframe {
/* position: absolute; */
width: 75%;
margin-left: 10px;
text-align: center;
}
.comiclist {
background-color: lightgrey;
padding-left: 5px;
width: 90%;
}
.floatbutt-right {
float: right;
}
.floatbutt-left {
float: left
}
.footer {
position: absolute;
width: 100%;
bottom: 0;
height: 30px;
background-color: lightgrey;
font-size: 12px;
color: grey;
}
.footer span {
float: right;
margin-top: 5px;
margin-right: 10px;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.spacer {
width: 100%;
height: 95px;
}
.content {
height: 100%;
width: 100%;
margin-bottom: -30px;
/* Footer */
}
#wrapper {
min-width: 100%;
min-height: 100%;
display:inline-block;
position:relative;
}
<head lang="de">
<link rel="stylesheet" href="inc/layout.css">
<script src="inc/javascript.js"></script>
<meta charset="UTF-8" />
<title>komix.lit</title>
</head>
<body>
<div id="wrapper">
<div id="navbar">
<img class="logo" src="inc/logo.png" /> komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
<button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
<div class="content">
<div class="spacer"></div>
<div class="pagelist">
<ul style="list-style-type: none;">
<li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li>
<li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li>
<li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li>
</ul>
</div>
<div class='pageframe'>
<div class='pageimg' style='height: 1024;'>
<img src='komix\19_03_18_10_21_31-12.jpg' alt='seite 1' style='max-width:100%' /> </div>
<div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div>
</div>
<div class="footer">
<span>text</span>
</div>
</div>
</body>
</html>
You can try this, hope this will help you
Remove min-height for pageimg class and content class then you will get your output.
.pagelist {
background-color: deeppink;
position: relative;
float: right;
width: 20%;
height: 70%;
overflow-y: scroll;
margin-right: 10px;
}
.pageimg {
position: relative;
float: left;
width: 100%;
/* min-height: 500px; */
text-align: center;
display: flex;
align-items: center;
}
.pageimg img {
margin: 0 auto;
}
.pagetext {
position: relative;
float: left;
margin-top: 1%;
width: 100%;
text-align: center;
padding-bottom: 10px;
}
.pageframe {
position: absolute;
width: 75%;
margin-left: 10px;
text-align: center;
}
.comiclist {
background-color: lightgrey;
padding-left: 5px;
width: 90%;
}
.floatbutt-right {
float: right;
}
.floatbutt-left {
float: left
}
.footer {
position: absolute;
width: 100%;
bottom: 0;
height: 30px;
background-color: lightgrey;
font-size: 12px;
color: grey;
}
.footer span {
float: right;
margin-top: 5px;
margin-right: 10px;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.spacer {
width: 100%;
height: 95px;
}
.content {
width: 100%;
margin-bottom: -30px;
/* Footer */
}
<div id="navbar">
<img class="logo" src="inc/logo.png" />
komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">Home</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">Komix</button>
<button id="login" class="navbutt" onClick="location.href='login.php'">Einloggen</button></div>
<div class="content">
<div class="spacer"></div><div class="pagelist"><ul style="list-style-type: none;"><li><a style='text-decoration: none; color: black;' href='pages.php?id=84'>Seite 1</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=86'>Seite 2</a></li><li><a style='text-decoration: none; color: black;' href='pages.php?id=85'>Seite 3</a></li></ul></div><div class='pageframe'><div class='pageimg' style='height: 1024;'>
<img src='komix\19_03_18_10_21_31-12.jpg'
alt='seite 1' style='max-width:100%'/> </div><div class='pagetext'>seite 1</div><button class='floatbutt-right' onClick="location.href='pages.php?id=86'">nächste Seite</button></div></div>
<div class="footer">
<span>text</span>
</div>
How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>
This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>
Okay so the desired outcome of this is to have the images on the left and the text sit to the right of the images, screenshot below:
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.contact_bar_text {
width: 100%;
}
.contact_bar_call {
background-image: url(/images/call.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
float: left;
margin-right: 100px;
}
.contact_bar_email {
background-image: url(/images/email.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_call">
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_email">
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
I want the image to be left of the text and automatically understand when the first line of text (phone number) is finished it will then have the email image with a 5px margin and then the email image and address.
Here a solution using img html tag instead of background-image. I edited a bit your html code.
So you just have use a <img src="###" />tag instead of the <div class="contact_image"></div>
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
.contact_bar_content{
display: flex;
align-items: center;
padding: 0 15px;
}
.contact_image{
height: 15px;
width: 15px;
background-color: red;
margin-right: 5px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
First of all, it's different from others questions because I can't use position: absolute; as I used usually because of my jQuery plugin (I don't use this plugin in the example, but I have to do position: relative; to the inside-table).
JSFIDDLE: https://jsfiddle.net/h8ywumbk/
HTML:
<div id="table">
<div id="inside-table" >
<span>Hello</span>
</div>
</div>
CSS:
#table {
width: 100%;
height: 100px;
border: solid 1px black;
background-color: transparent;
}
#inside-table {
position: relative;
width: 98%;
height: 80px;
background-color: transparent;
border: solid 1px black;
margin: 0 auto;
margin-top: 10px;
}
#inside-table span {
position: relative;
top: 50%;
transform: translateY(-50%);
}
I'm trying to center the text (not a single line) vertically and horizontally on the tables. Any suggestions?
Just use flexbox
#table {
width: 100%;
height: 100px;
border: solid 1px black;
background-color: transparent;
}
#inside-table {
position: relative;
width: 98%;
height: 80px;
background-color: transparent;
border: solid 1px black;
margin: 0 auto;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
#inside-table span {
}
<div id="table">
<div id="inside-table">
<span>Hello</span>
</div>
</div>
Try this:
.table {
display: table;
width: 100%;
}
.td {
display: table-cell;
vertical-align: middle;
}
<div class="table">
<div class="td">
text
</div>
<div class="td">
<img alt="" src="http://url style="width: 120px; height: 148px;" />
</div>
</div>
I got it centered like this:
#inside-table span {
position: relative;
top: 50%;
left: 50%;
}
You can always mess with the percentages if you want it shifted one direction or another