I am making a website for colleges and I have a gallery, but I cant get all the images to stay at their respective spots on the page when the window is resized. That's my main issue: when the window is resized, all the text and images on every page just covers each other and it's horrible. All my photos are absolute and have percents for left and top. I am modeling my website just like Elon Musk's the BORING COMPANY website. Is there any way someone could help me draft up some code to make my images on my pages not completely collapse when the window is resized?
The Boring Company Gallery I'm Trying to mimic, Also Try Resizing to see the effect I'd like
Here's my Portfolio page:
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="Style.css">
</head>
<body>
<title> Portfolio</title>
<div id="logo">
<img src=Myname.png" width=475px height=225px>
</div>
<table style="position:absolute;top:25%;z-index: 100;width:50%;left:25%;">
<tr>
<td><div id="nav">HOME</div></td>
<td><div id="nav">ABOUT ME</div></td>
<td><div id="nav">PORTFOLIO</div></td>
<td><div id="nav">EXTRACURRICULARS</div></td>
<td><div id="nav">GALLERY</div></td>
<td><div id="nav">CONTACT ME</div> </td>
</tr>
</table>
<div class="portfoliothumbnails" id="thumbnail1"><img src="Medicine.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle1">Lorem Ipsum</div>
<div class="portfoliotext" id="portfoliotext1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare lorem vitae tellus iaculis, id viverra mi pulvinar. Donec sodales commodo mi at commodo. Nullam placerat ut mauris ac maximus. Pellentesque accumsan blandit ante, in pellentesque enim fringilla sed. Nunc magna erat, bibendum et feugiat eu, consequat et leo. Cras commodo fringilla lectus, ut varius ex tempus eget. Duis ultricies, velit et tristique eleifend, velit arcu dignissim elit, sit amet mattis odio dolor ac est. Quisque accumsan convallis accumsan. Suspendisse ornare eros vel velit molestie porta. Fusce vitae euismod ante. Aenean vel justo at odio ornare finibus quis id mi. Integer congue magna non dui blandit, consectetur rhoncus lacus varius. Morbi vel massa orci. Suspendisse gravida lorem id elit mattis tincidunt.</div>
<button class="button" id="button1">Learn More</button>
<div class="portfoliothumbnails" id="thumbnail2"><img src="English.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle2">English Esssays/Documents</div>
<div class="portfoliotext" id="portfoliotext2">A collection of my essays and analysis responses throughout my high school career in Language Arts. </div>
<button class="button" id="button2">Learn More</button>
<div class="portfoliothumbnails" id="thumbnail3"><img src="Trends.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle3">Newspaper Publications</div>
<div class="portfoliotext" id="portfoliotext3">Some of my work in English class was published to the local township newspaper, and was framed by my parents in our living room.</div>
<button class="button" id="button3">Learn More</button>
<div class="portfoliothumbnails" id="thumbnail4"><img src="Art.jpg" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle4">Creative Work</div>
<div class="portfoliotext" id="portfoliotext4">Work from English and Art such as plays, poems, drawings, photoshop work, and other forms of creative literature. The majority of this section is populated by my work from the creative writing and journalism class, Writing for Publication, I took my freshman year and Digital Arts I from my sophomore year.</div>
<button class="button" id="button4">Learn More</button>
</body>
</html>
Here's my style:
#logo{position:absolute;
top:2.5%;
left:25%;}
body {
margin-left:25%;
margin-right:25%;
}
#nav{text-decoration:none;
font-size:15px;
font-family:Roboto, sans-serif;
color:black;}
a{text-decoration:none;}
* {box-sizing:border-box}
.slideshow-container {
max-width: 50%;
position: absolute;
margin: auto;
left:25%;
top:30%;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#headshot{position:absolute;
top:35%;
left:20%;}
#aboutmetitle{position:absolute;
top:45%;
left:25%;
font-family:Roboto, sand-serif;
color:black;
font-weight:bold;
font-size:25px;
margin-left:20%;
margin-right:25%;}
#aboutmetext{position:absolute;
top:50%;
left:25%;
font-family:Roboto, sand-serif;
color:black;
font-size:18px;
margin-left:20%;
margin-right:25%;}
#aboutmelazar{position:absolute;
top:85%;
left:15%;}
.portfoliothumbnails{position:absolute;}
#thumbnail1{left:25%;top:35%;}
#thumbnail2{left:25%;top:65%;}
#thumbnail3{left:25%;top:95%;}
#thumbnail4{left:25%;top:125%;}
.button{ background-color: black;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
padding: 10px 24px;
cursor: pointer;
font-family:Roboto, sans-serif;
position:absolute;
font-weight:bold;}
.button:hover{opacity:0.7;}
#button1{top:55%;left:55%;}
#button2{top:85%;left:55%;}
#button3{top:115%;left:55%;}
#button4{top:145%;left:55%;}
.portfoliotitles{position:absolute;
color:black;
font-size:16px;
font-weight:bold;
font-family:Roboto, sans-serif;}
#portfoliotitle1{top:35%;left:40%;}
#portfoliotitle2{top:65%;left:40%;}
#portfoliotitle3{top:95%;left:40%;}
#portfoliotitle4{top:125%;left:40%;}
.portfoliotext{position:absolute;
color:black;
font-size:16px;
font-family:Roboto, sans-serif;
margin-right:25%;
}
#portfoliotext1{top:40%;left:40%;}
#portfoliotext2{top:70%;left:40%;}
#portfoliotext3{top:100%;left:40%;}
#portfoliotext4{top:130%;left:40%;}
#image1{position:absolute;top:35%;left:7.5%;}
#image2{position:absolute;top:35%;left:40%;}
#image3{position:absolute;top:35%;left:65%;}
#image4{position:absolute;top:85%;left:12.5%;}
I'm really sorry for typing all this, here's my gallery if it matters...
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="Style.css">
</head>
<body>
<title>Gallery</title>
<div id="logo">
<img src="Me.png" width=475px height=225px>
</div>
<table style="position:absolute;top:25%;z-index: 100;width:50%;left:25%;">
<tr>
<td><div id="nav">HOME</div></td>
<td><div id="nav">ABOUT ME</div></td>
<td><div id="nav">PORTFOLIO</div></td>
<td><div id="nav">EXTRACURRICULARS</div></td>
<td><div id="nav">GALLERY</div></td>
<td><div id="nav">CONTACT ME</div></td>
</tr>
</table>
<div id="image1"><img src="\Personal Website 3.0\Gallery\A.jpg" height=450px width=600px></div>
<div id="image2"><img src="\Personal Website 3.0\Gallery\B.jpg" height=675px width=450px></div>
<div id="image3"><img src="\Personal Website 3.0\Gallery\C.jpg" height=450px width=600px></div>
<div id="image4"><img src="\Personal Website 3.0\Gallery\D.jpg" height=800px width=450px></div>
</body>
</html>
Try using Bootstrap, a CSS, HTML and JS library for building responsive websites.
You can download it and find docs and examples at https://getbootstrap.com
Basically it divides the view in 12 columns (it's called Grid system), and screens in 5 categories, xl (extra-large), lg (large), md (medium), sm (small), xs (extra-small); using CSS classes you can decide the number of columns to assing to each element depending on the screen and also column offsets between elements, using classes col-display-n
where display can be xl, lg, md, sm, xs and n an integer from 1 to 12 and offset-display-n for offsets.
I think this can be helpful for you. Here Grid system is explained better
I think this tutorial will help you to achieve what you want:
https://w3bits.com/css-masonry/
Generally using position:absolute cannot help you to achieve what you want. The only way to do it is by using position: absolute and to add width in percentages, but it would be an overkill, it would take you a lot of time to achieve it properly on all resolutions and in the end, using something like the link I sent you will get you the proper result faster
Related
I have an HTML component that has an image floating to the left and text on the right. When the text's height is larger than the image, the text will wrap to the left. I want to add some padding between the image and the wrapped text. I could add a bottom padding to the image, but I don't want the padding to show up when the text is not wrapped. Here is what the component should look like when the text is no wrapped. The image should not have a bottom padding:
Here is what it should look like when the text is wrapped. There should be some padding between the image and the wrapped text:
Is there a way to do this through css?
An idea in case the image height is fixed or known:
.container {
border:2px solid;
min-height:200px; /* same as image height */
font-size:19px;
}
.container img {
float:left;
margin:0 20px 20px 0;
}
<div class="container">
<img src="https://picsum.photos/id/1014/200/200" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum quis mi vitae molestie. Sed scelerisque fringilla interdum. Duis ac purus nisl. Nulla vehicula vehicula turpis id convallis. Etiam nec nisl nibh. Mauris lorem mauris, vehicula nec massa in, accumsan egestas eros. Integer vehicula nulla sed enim laoreet maximus. Vestibulum at interdum sem. Sed interdum volutpat massa,
</div>
Yes, you can do it. Follow this example for HTML and css.
body {
margin: 20px;
text-align: center;
}
img {
float: left;
margin: 0px 10px 5px 10px;
}
p {
text-align: justify;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Wraping an Image with the text
</title>
</head>
<body>
<div class="square">
<div>
<img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1024px-Image_created_with_a_mobile_phone.png" alt="Longtail boat in Thailand" width="300px">
</div>
<p>
How many times were you frustrated while looking
out for a good collection of programming/algorithm
/interview questions? What did you expect and what
did you get? This portal has been created to
provide well written, well thought and well
explained solutions for selected questions.
An IIT Roorkee alumnus and founder of GeeksforGeeks.
He loves to solve programming problems in most
efficient ways. Apart from GeeksforGeeks, he has
worked with DE Shaw and Co. as a software developer
and JIIT Noida as an assistant professor. It is a
good platform to learn programming. It is an
educational website. Prepare for the Recruitment
drive of product based companies like Microsoft,
Amazon, Adobe etc with a free online placement
preparation course.
</p>
</div>
</body>
</html>
I am trying to make the text appear below the image but it is not budging at all. My goal is it make the text appear below the image in the container
.left-col p {
text-align: justify;
width: 300px;
}
.left-col img {
margin: 0 auto;
left: 5%;
width: 300px;
height: 130px;
position: absolute;
text-align: center;
}
</head>
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium
</p>
Instead of using position absolute, remove it. Reason is that the element is positioned relative to its first positioned (not static) ancestor element. So, you could of course mess with top, right and left values to make it work but it would not be responsive at all.
Read more about it here: MDN Position CSS
The default value of position is static, this way the elements renders in a specific order(its what you want, render img and p after).
This is the pen if you need:
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="https://via.placeholder.com/200x150" width="200" height="150" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</div>
</div>
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
width:300px;
height: 130px;
}
Also, instead of setting width 300px to paragraph and img, you could set only one time to your .left-col div. I have also removed other properties that you were not using.
another note is that you forgot the " on height attribute.
In css there is use [ position absolute ] For the image and is not used in the text You must set the position in the image and the text or leave it to the default setting I deleted it from the image properties in css
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
margin: 0 auto;
left: 5%;
width:300px;
height: 130px;
text-align:center;
}
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</body>
Remove the line 'position: absolute;' from CSS. Complete (close) the DIV and P tags. You may introduce '.container{...}' where you may position (or whatever) the image-and-text together. You may wish to use 'margin: 0;' to glue the text to the image. Good luck!
This is my first post here, so please tell me, if I'm doing something wrong.
I have a problem with the following code:
That's my HTML:
<div class="sideSection">
<div class="sidebar">
<div class="mainContainer">
<div class="articleHeader">
<h3>Sapien lorem tempus</h3>
<h4>Pharetra sed bibendum lorem</h4>
</div>
<p>Nunc cursus quam vitae ipsum viverra luctus. Nam nullam feugiat massa lacinia lectus vitae. Sed eu turpis at adipiscing.</p>
<div class="sidebarBox">
<img src="images/pic04.jpg" alt="ernster Blick">
<div class="sidebarBoxText">
Cursus quam vitae
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="sidebarBox">
<img src="images/pic05.jpg" alt="Straße">
<div class="sidebarBoxText">
Etiam at orci ut nibh
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="sidebarBox">
<img src="images/pic06.jpg" alt="telefonierender Blick">
<div class="sidebarBoxText">
Mauris non tellus
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="sidebarBox">
<img src="images/pic07.jpg" alt="Skyscraper">
<div class="sidebarBoxText">
Duis id ipsum
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="moreInfoButton">More Info</div>
</div>
</div>
</div>
And here is my CSS:
.sideSection .sidebar,
.sideSection .sidebar .sidebarBox {
float: left;
}
.sideSection .sidebar .sidebarBox {
padding: 25px 0px 20px;
border-bottom-style: solid;
border-width: 1px;
border-color: #ccc;
}
.sideSection .sidebar .sidebarBox:last-child {
border: none;
}
Now, what I'm trying to do, is to remove the border from the last "sidebarBox" class.
This isn't quite working out yet, because the code isn't affecting the border at all. I don't really know what I'm doing wrong, and I hope that someone can help me here, as it is for work :S
EDIT: Okay, as far as I figured it out by now, it's a problem with the s.
When I use "".sidebarBox:nth-child(6)"" it works just fine..
Does the ":last-child" attribute actually count all s that I used in that section?
:last-child only matches the actual last child of the parent div.
You have the .moreinfoButton following it. If you can move the button to outside the .mainContainer, it will work as you expect it
The :last-child selector applies to the last element inside a parent div. In your case the parent div is .mainContainer and its last child is .moreInfoButton and not .sidebarBox.
I would recommend you to add last class to the sidebarBox you want to modify, i.e.
<div class="sidebarBox last">
and the corrspondent css code is
.sideSection .sidebar .sidebarBox.last {
border: none;
}
Or another way to handle it is to wrap all your .sidebarBox elements in one parent <div>. Then you would be able to use :last-child selector.
So i have this weird problem if it's even a problem(?) might just be me who doesn't understand CSS and how it works
i created a css class called textShadow
.textshadow {
text-shadow: 1px 1px 0px #000000;
}
and when i added it to en element suddenly all the text had the same text-shadow is it supposed to be like this?
if you add text-shadow with
style="text-shadow: 1px 1px 0px #000000;"
only the specefide element gets text-shadow
Thank you for reading my post and happy holidays!
EDIT: Adding some html code
<div class="w-container">
<div class="w-slider w-hidden-tiny headerslider" data-animation="slide" data-duration="500" data-infinite="1" data-delay="4000" data-autoplay="1">
<div class="w-slider-mask">
<div class="w-slide headerSliderContentPadding" style="text-align: center">
<h1 class="textOnDark1 textshadow">Suspendisse varius enim in eros elementum tristique!
</h1>
<h4 class="w-hidden-tiny w-hidden-small textOnDark1 textshadow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
</h4>
<div class="w-hidden-main w-hidden-medium" style="display: inline-block; margin-left: auto; margin-right: auto;">
<a class="buttonBlue btn extraPaddíng10px" href="#">Button Text</a>
</div>
</div>
<div class="w-slide">
</div>
<div class="w-slide">
</div>
</div>
<div class="w-slider-arrow-left">
<div class="w-icon-slider-left"></div>
</div>
<div class="w-slider-arrow-right">
<div class="w-icon-slider-right"></div>
</div>
<div class="w-slider-nav w-round w-num"></div>
</div>
</div>
I only want the elements that have the textshadow class to have text-shadow, but all the element get's text-shadow when i run it in chrome, firefox and internet explorer (even the div slider get's shadowing) why is that?
After some html inspection i found that the class had for some reason been applied to the <html> tag(?)
and some other weird classes as well i guess it have to do something with how webflow works (forgot to mention that the website was created with webflow) why it dose this i have no idé but at least i know why now :)
Thanks for all the suggestions and help guys you are great
i'm new to coding, but i'm trying hard. There's a thing i still fully don't understand. Div inside a div/image scaling and positioning with bootstrap. I'm trying to make a responsive website and need some help with the layout.
Here's the HTML code i have:
<div class="container">
<!-- Pagrindinis divas -->
<div id="left_bar" class="col-md-8">
<div id="image_div">
<div ><img src="http://placehold.it/120x100"/></div>
</div>
<div id="text_div">
<div id="heading_text">
Heading 1
</div>
<div id="text" class="p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis odio a sem hendrerit consectetur. Quisque feugiat eget urna vel consectetur. Curabitur gravida lacus quis consectetur suscipit. Etiam a nulla quis lacus bibendum convallis. Mauris dignissim commodo felis quis semper.
</div>
</div>
</div>
</div>
<!-- Soninis widgetas -->
<div id="right_bar" class="col-md-4 hidden-sm hidden-xs">
Right bar
</div><!-- Soninio widgeto pabaiga -->
</div>
Here's an image
As the website scales down i want the image and the orange div to scale down too.
fiddle link
Explanation
The key to make the image scale is to set the width of it to 100%, as I did under #image_div img. This way it will take on the width of it's parent container.
Then you just have to make sure the parent container is fluid. In my example I made it 80%. This way it will always be 80% of the browser width, or the parent width - depending if it's wrapperd in another div.
When the 80% container scales because the img is set to 100% it will always occupy 100% of the 80% container.
Hope that help clear things up.
Additional Resources
If you're interested in learning more about responsive this book won't disappoint. Super quick read and it'll answer all of your questions on responsive:
http://www.abookapart.com/products/responsive-web-design
The Example Code + JSFiddle
Here's an example of what you're looking for: http://jsfiddle.net/f25xM/1/
HTML
<div class="cf wrapper">
<div class="container">
<!-- Pagrindinis divas -->
<div id="left_bar" class="cf col-md-8">
<div id="image_div">
<img src="***" />
</div>
<div id="text_div">
<div id="heading_text">Heading 1</div>
<div id="text" class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis odio a sem hendrerit consectetur. Quisque feugiat eget urna vel consectetur. Curabitur gravida lacus quis consectetur suscipit. Etiam a nulla quis lacus bibendum convallis. Mauris dignissim commodo felis quis semper.</div>
</div>
</div>
</div>
<!-- Soninis widgetas -->
<div id="right_bar" class="col-md-4 hidden-sm hidden-xs">Right bar</div>
<!-- Soninio widgeto pabaiga -->
</div>
CSS
body {
margin:0;
padding:0;
}
.wrapper {
background:red
}
.container {
background:red;
width:80%;
}
#left_bar, #right_bar {
float:left;
}
#left_bar {
background:green;
}
#right_bar {
background:purple;
width:20%;
}
#image_div, #text_div {
float:left;
}
#image_div {
background:orange;
width:20%;
}
#image_div img {
width:100%;
}
#text_div {
background:yellow;
width:80%;
}
/* Clearfix */
.cf:before, .cf:after {
content:" ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
I'm not sure why you have a div inside of "image_div" but you can just set the width of the image to 100%. and that way when the container div resizes, the image will also resize. Not sure if that makes sense, its hard to help you without some of your css or a fiddle or codepen.
In Bootstrap3 you can just add class="img-responsive" to make it 100% of the parent element.