*Hello, I want to have text below the image like in the example, but I can't figure out what is wrong, i took the code from
W3Schools: https://www.w3schools.com
/css/tryit.asp?filename=trycss_ex_images_card
Can someone help? Thanks
Example Image: https://imgur.com/a/P86DVjW
What It Looks Like: https://imgur.com/a/JOXpAJI*
```{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #32053d;
}
header {
position: absolute;
top: 0;
Left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center
}
header .logo
{
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul
{
display: flex;
justify-content: center;
align-items: center;
}
header ul li
{
list-style: none;
margin-left: 20px;
}
header ul li a
{
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active
{
background: #fff;
color: #4a2880;
}
h1 {
color: white;
margin-top: 250px;
margin-left: 270px;
}
p {
color:white;
margin-left: 60px;
text-align: center;
font-size: 15px;
}
.sec {
margin-right: 80px;
}
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
```<!DOCTYPE html>
<html>
<h1>ABC</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<center><img src="images/ArrowDown.webp" id="arrow" width="200"></center>
<div class="sec">
<center> <div class="polaroid">
<img src="Images/Darbs1.png" alt="Darbs1" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<center> <div class="polaroid">
<img src="images/Darbs1.png" alt="Darbs2" style="width:100%">
<div class="container">
<p>Code</p>
</div>
</div> </center>
<head>
<title>Projects</title>
<link rel="stylesheet" type="text/css" href="Website.css"
</head>
<body>
<header>
Logo
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</header>
</body>
</html>```
The problem is with the css. You have set the p tag color:white that is why it is not showing. Set color:black
p {
color:black;
margin-left: 60px;
text-align: center;
font-size: 15px;
}
I approve of Usama's answer, the description is written in white on a white background.
You can add a specific rule:
.polaroid .container p {
color:black;
}
PS: Can you reformat your code?
Use 4 spaces or the button {} in the text editor
Related
here is my index.html:
<div id="container1" class="py-0 my-0">
<div id="left" class="col-md-6">
<img class="image" src="C:\Users\asus\Desktop\project\image.png">
</div>
<div id="right" class="col-md-6">
<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav ml-auto">
<li class="nav-index">
HOME
</li>
<li class="nav-index">
ABOUT US
</li>
<li class="nav-index">
COURSES
</li>
<li class="nav-index">
LOG IN
</li>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<p class="paragraph col-md-6">
<h3 class="Welcome text-center">Welcome to mobile legends!</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br>
<br>
<footer class="footer1" id="footer1">
<h6>Contact the developer:</h6>
<p>luckyllemos0909#gmail.com</p>
</footer>
</div>
</div>
here is my style.css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
align-items: center;
vertical-align: middle;
}
#container1{
width: 100%;
height: 100%;
vertical-align: middle;
display: flex;
align-items: center;
}
#left,
#right {
width: 50%;
height: 100%;
}
#left {
background: #ffd6dd;
align-items: center;
}
.image{
margin-top: 50px;
margin-left: -10px;
padding: 100px;
}
#right {
background: #FBAED2;
align-items: center;
}
.paragraph{
color: red;
margin: 50px;
}
.fa {
margin-top: none;
padding: 20px;
font-size: 20px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
color: #000000;
}
.fa-linkedin {
color: #000000;
}
.fa-youtube {
color: #000000;
}
.Welcome{
margin-left:60px;
}
.nav-link{
color: #000000;
}
.nav-index{
padding-left: 30px;
padding-right: 30px;
align-items: center;
}
my problem is when i put it in mobile phone it does not go flexible.
This is the original output:
and This what happens when try to look on mobile screen:
What you're looking for is media queries, which let you decide how your website looks on varying screen sizes. In the example below in the css class example is first shown how it would look on a larger screen size, then below with the media query in effect you can stylize how your page would look on a (in this example) a screen with a width of less than 900px. Take a look at the link below for further explanation.
.example {
font-family: "Droid+Sans";
font-weight: normal;
color: #ffffff ;
font-size: 7rem;
position: absolute;
top: 17%;
width: 100%;
}
#media screen and (max-width: 900px){
.example {
font-size: 3.5rem;
margin: auto;
width: 50%;
left: 20%;
right: 20%;
padding-bottom: 100px;
}
}
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Use Bootstrap Utility Classes in a better way. Since you are using bootstrap simply add your classes to work for different break points.
Add col-12 Utility classes on the following elements: Note that Bootstrap follows mobile-first approach.
<div id="left" class="col-12 col-md-6">
And
<div id="right" class="col-12 col-md-6">
I'm trying to create a simple web page consisting of three divs: A header div containing an image, a content div containing text and a nav div containing the nav elements and a logo. My goal is to overlap the header div with the nav div so that the nav elements and the logo are always positioned vertically centered on the lower border of the header div.
Here's my code so far:
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
text-align: center;
}
#headerimage {
height: 100%;
width: 100%;
z-index: 50;
position: relative;
}
#headerimage > img {
max-width: 100%;
max-height: 100%;
border: 6px;
border-style: solid;
border-color: #671013;
}
#nav {
width: 100%;
overflow: visible;
top: 97.75%;
z-index: 100;
position: absolute;
}
#nav > img {
text-align: center;
vertical-align: middle;
margin-top: -6.2%;
height: 20%;
width: 20%;
}
.nav-element {
width: 10%;
height: 100%;
padding: 5px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-align: center;
font-weight: bold;
border: 4px;
border-style: solid;
border-color: #2d3139;
background-color: white;
color: #80857f;
}
.nav-element:hover {
background-color: #2d3139;
color: white;
cursor: pointer;
}
.left {
float: left;
z-index: 100;
}
.first {
margin-left: 3%;
}
.right {
float: right;
z-index: 100;
}
.last {
margin-right: 3%;
}
#point2 {
margin-left: 9%;
}
#point3 {
margin-right: 9%;
}
#content {
height: 100%;
width: 100%;
}
#text {
padding-top: 8%;
padding-left: 3%;
padding-right: 3%;
padding-bottom: 5%;
text-align: justify center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
</style>
</head>
<body>
<div id="headerimage">
<img src="https://images.pexels.com/photos/34577/pexels-photo.jpg" alt="Headerimage" />
<div id="nav">
<div id="point1" class="nav-element left first">
Point 1
</div>
<div id="point2" class="nav-element left ">
Point 2
</div>
<img src="https://pixabay.com/get/55e2d3454853a814f1dc8460da2932771736dfe6575074_640.png" alt="Logo" />
<div id="point3" class="nav-element right last">
Point 3
</div>
<div id="point4" class="nav-element right">
Point 4
</div>
</div>
</div>
<div id="content">
<div id="text">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</h1>
</div>
</div>
</body>
</html>
Currently the nav div doesn't stay centered on the lower border and my online researches haven't brought any useful results so far, so if anyone has an idea to point me in the right direction, I'd be really grateful!
Hope this is what you want:
nav img {
margin-top: -40px;
}
#point1, #point2, #point3, #point4 {
margin-top: -40px;
}
Fine-tune the margin as fits.
the parent div, .blog_content, has two childern, one is a p element and the other is an image. for some reason they are behaving like block objects and not inline block. what is happenning is they are appearing on top of each other, like block elements would and not beside each other like what im trying to accomplish. i have set widths for them but they seem to be just ignoring them.
ill post the code below.
the relevant html
edit to show the full code
<!doctype html>
<html>
<head>
<title>My blog</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<nav>
<div id="nav_links">
Home
all posts
Services
About
Contact
</div>
<div id="nav_search">
<form method="post" action="#">
<input id="nav_form_input" type="text" name="nav_search" placeholder="Search">
<input id="nav_search_submit" type="submit" value="GO">
</form>
</div>
</nav>
<main>
<section>
<article>
<h1>My first blog post</h1>
<hr>
<div class="blog_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<img src="images/159.jpg" alt="shit hot 159">
</div>
</article>
</section>
<aside>
</aside>
</main>
</body>
</html>
the relevant css
/* -------------------------------------------------------------------------------------------------------------------------------------*/
/* START OF HEADER.HTML STYLES */
/* -------------------------------------------------------------------------------------------------------------------------------------*/
nav {
position: relative;
height: 40px;
width: 100%;
background-color: rgb(40,50,60);
}
#nav_links {
position: relative;
float: left;
padding-left: 40px;
height: 40px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
#nav_search {
position: relative;
float: right;
padding-right: 80px;
height: 40px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
}
nav > #nav_links > a {
text-decoration: none;
font-family: arial;
font-size: 12px;
color: rgb(220,220,220);
padding-left: 25px;
text-shadow: 0px 0px 1px grey;
letter-spacing: 1px;
}
#nav_form_input{
border-radius: 10px 0px 0px 10px;
height: 20px;
border: none;
outline: none;
color: rgb(220,220,220);
background-color: rgb(60,70,80);
padding: 5px;
}
#nav_search_submit {
border-radius: 5px;
height: 30px;
border: 1px solid rgb(60,110,30);
background: linear-gradient(rgb(100,160,80), rgb(90,140,60));
font-family: arial;
font-weight: bold;
color: rgb(240,240,240);
}
/* -------------------------------------------------------------------------------------------------------------------------------------*/
/* START OF MAIN.HTML STYLES */
/* -------------------------------------------------------------------------------------------------------------------------------------*/
main {
position: relative;
margin: 0 auto;
display: flex;
flex-flow: nowrap ;
width: 100%;
min-height: 600px;
flex-flow: row nowrap;
justify-content: space-around;
align-items: flex-start;
}
main section {
margin: 20px auto;
width: 65%;
min-height: 400px;
}
main section article {
border-radius: 30px 30px 0px 0px;
background-color: rgb(240,240,240);
height: 400px;
}
main section article h1 {
margin: 0 auto;
padding: 10px 0px 10px 20px;
border-radius: 30px 20px 0px 0px;
border: 2px 2px 0px 2px solid rgb(0,0,255);
color: white;
letter-spacing: 1px;
background: linear-gradient(rgb(80,170,240), rgb(60,140,240));
font-weight: 400;
}
hr {
width: 95%;
color: rgb(120,120,120);
}
.blog_content {
display: inline-flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 100%;
}
main section article p {
overflow: hidden;
text-overflow: ellipsis;
white-space: wrap;
width: 42%;
}
main section article img {
margin: 3%;
width: 42%;
border-radius: 4px;
}
main aside {
margin: 20px auto;
width: 20%;
min-height: 400px;
border: 1px solid black;
}
i have tried using both flex and inline-flex but no joy with either
I'm trying to make a vertical navbar on the left of the page which is as long as the website (i.e. stretches down to the footer). However, it is only the right height when there is nothing above it - when I add the site's title, the navbar gets longer than the site.
body{
padding: 0px;
margin: 10px auto 0 auto;
font-family: 'corbel','arial';
background: #fff;
color: #444; /* text colour */
max-width: 1500px;
height: auto;
position: relative;
}
footer{
background: #333;
color: #fff;
padding: .1em 3em;
width: auto;
margin-left: 130px;
}
h1{
text-align: center;
font-size: 85px;
padding: 10px;
margin: auto;
margin-top: 10px;
}
#content{
margin-left: 150px;
}
/* Navbar */
#navbar{
background-color: #599;
list-style-type: none;
overflow: hidden;
width: 130px;
margin: 0px;
font-family: 'corbel','arial';
text-align: center;
padding-left: 0px;
height: 100%;
float: left;
position: absolute;
}
#nav_li{
text-align: center;
}
#nav_a{
text-decoration: none;
margin: 10px;
display: inline-block;
color: white;
}
<h1>Website Title</h1>
<body>
<ul id='navbar'>
<li id='nav_li'><a id='nav_a' href='index.html'>Home</a></li>
<li id='nav_li'><a id='nav_a' href='gallery.html'>Gallery</a></li>
<li id='nav_li'><a id='nav_a' href='reviews.html'>Our reviews</a></li>
</ul>
<div id='nav_fill'> </div>
<div id='content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
<p>Content © Business Name - Website design ©</p>
</footer>
</body>
Big thanks to anyone who can help!
There are multiple ways of fixing this problem - the easiest is to just put the html, body background color as the sidebar in CSS (with height: 100%), then add a sticky header and footer at the top and bottom, and put a background-color on the container-element.
Something like this:
* { margin: 0; padding: 0;}
html, body {
height: 100%;
background: blue;
}
#content {
background: white;
}
h1 {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3em;
}
#menu {
margin-top: 3.5em;
float: left;
width: 7em;
color: white;
}
#content {
background: white;
height: 100%;
margin: 3em 0 4em 7em;
padding-top: 3.5em;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 4em;
background: gray;
}
<body>
<h1>This is a heading</h1>
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="content">
<p>Something goes in here</p>
</div>
<footer>This is the footer</footer>
</body>
Try using position:fixed, and min/max-height i also suggest to use calc(), to calculate good size of navbar.
Here You have jsfiddle
I am unable to put " a:hover " on my home button in menu bar. even unable to remove the text-decoration.
while i was trying my hands on media queries , just got puzzled.
****stack overflow settings is not allowing me to post question unless i add more details*****
body {
background-image: url("blue-bokeh.jpeg");
width: 100%;
height: 100%;
}
.wrap {
height: auto;
width: 90%;
margin: auto;
}
header {
background: #333;
color: white;
height: auto;
width:100%;
float: left;
}
header nav {
width: 100%;
height: auto;
}
header nav ul {
list-style: none;
height: auto;
width: auto; /* what happens if i change the value to 100% */
float: right;
margin-right:30px;
}
header nav ul li {
display: inline;
padding: 15px 30px;
float: left;
border-radius: 5px;
}
header nav ul li a.active {
text-decoration: none;
}
header nav ul li:hover {
background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
/*background: tomato;*/ /* get the code checked , if its repeated in .top class */
float: left;
margin-top: 20px;
border-radius: 10px;
/*padding: 20px 20px;*/
height: auto;
width: 60%;
margin-right: 2%;
}
.top {
background: tomato;
margin-bottom: 10px;
float: left;
border-radius: 10px;
padding: 20px 20px;
}
.top h3 {
color: darkslategray
}
.bottom {
background: tomato;
margin-bottom: 50px;
float: left;
border-radius: 10px;
padding: 20px 20px;
}
.bottom h3 {
color: darkslategray
}
.sidebar {
float: left;
height: auto;
width: 38%;
margin-top: 20px;
}
.topside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.middleside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.bottomside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
footer {
background: darkslategray;
float: left;
width: 100%;
height: auto;
border-radius: 10px;
}
footer p {
padding-left: 50px;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------MEDIA QUERY STARTS HERE---------------------------------------------------------------*/
#media screen and (max-width: 700px) {
body {
background-image: url("blue-bokeh.jpeg");
width: 100%;
height: 100%;
}
.wrap {
height: auto;
width: 90%;
margin: auto;
}
header {
background: #444;
color: white;
height: auto;
width:100%;
}
header nav {
width: 100%;
height: auto;
}
header nav ul {
list-style: none;
height: auto;
width: 100%; /* what happens if i change the value to 100% */
margin: 0;
padding: 0;
text-align: center;
}
header nav ul li {
display: block;
padding: 15px 30px;
float: none;
}
header nav ul li:hover {
background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
/*background: tomato;*/ /* get the code checked , if its repeated in .top class */
margin-top: 20px;
border-radius: 10px;
/*padding: 20px 20px;*/
height: auto;
width: 100%;
}
.top {
background: tomato;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.top h3 {
color: darkslategray
}
.bottom {
background: tomato;
border-radius: 10px;
padding: 20px 20px;
}
.bottom h3 {
color: darkslategray
}
.sidebar {
height: auto;
width: 100%;
}
.topside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.middleside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
.bottomside {
background: orangered;
margin-bottom: 10px;
border-radius: 10px;
padding: 20px 20px;
}
footer {
background: darkslategray;
float: left;
width: 100%;
height: auto;
border-radius: 10px;
}
footer p {
padding-left: 50px;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="restheme.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="mainbody">
<article class="top">
<h3>First Post</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
<article class="bottom">
<h3>Second Post</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</article>
</div>
<div class="sidebar">
<aside class="topside">
<h3>Top Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
<aside class="middleside">
<h3>Middle Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
<aside class="bottomside">
<h3>Bottom Sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</aside>
</div>
<footer>
<p>Copyright © 2016 Faltoo Webdesigns</p>
</footer>
</div>
</body>
</html>
If I understand you right, you want to achive something like this?
https://jsfiddle.net/j7j54Lta/1/
I did some improvements and changed the structure. The li gets the .active-class and not the anchor. If the anchor in the active li is hovered it changes the color (or whatever you want to achive):
header nav ul li.active a:hover{
color: red;
/* or whatever*/
}
Moreover there is no text-decoration:
header nav ul li.active a {
text-decoration: none;
cursor: default;
}