I'm trying to create a grid layout for my portfolio site. I'm having trouble with getting it to work online. When I try a preview in dreamweaver it look just fine, but when uploaded it's all messed up.. Please help
http://www.kaspervanvliet.nl/index.html
HTML:
<div id="images-containter">
<div class="col">
<img src="images/k_Web-03.jpg">
<img src="images/curriculum_new.jpg">
<img src="images/Finnley's_2.jpg">
<img src="images/Justme_1.jpg">
</div>
CSS:
.images-containter {
position: relative;
width: auto;
height: auto;
}
.images-containter img{
width: 350px;
height: auto;
background: #fffff;
padding: 0px;
margin: 15px;
border: none;
}
.col {
width: 350px;
display: block;
float: left;
margin: 15px;
vertical-align: top;
align: center;
}
Set a width and height on your image tags. I assume you want it to all look the same cross browser. That would be the best bet.
Your code: my changes
<div class="col">
<img src="images/k_Web-03.jpg" **height="100" width="75"**>
<img src="images/curriculum_new.jpg" **height="100" width="75"**>
<img src="images/Finnley's_2.jpg" **height="100" width="75"**>
<img src="images/Justme_1.jpg" **height="100" width="75"**>
</div>
etc...
This takes some planning on your part, but you could simply allow them to click the image and see a full view. Otherwise, you're going to have different images with different aspect ratios and it will never look as good as you want it to.
Also, please don't structure your site with tables unless you're going to be using tabular data. It's a pain to edit in the long run.
EDIT**
The below html/css will give you the desired result. There are 4 divs with the class of "cols" those 4 divs are set up to be 4 columns. The images inside the div will stack, evenly spaced above and below. Also, the height will automatically adjust based on the width being constrained to 230px.
Let me know if you need anything else.
<!doctype html>
<html>
<head>
<style>
.wrap{
width:960px;
margin:0 auto;
}
.cols{
width:230px;
padding:5px;
float:left;
}
.cols img{
width:230px;
display:block;
margin:5px 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="cols">
<img src="images/k_Web-01.jpg">
<img src="images/k_Web-02.jpg">
<img src="images/k_Web-03.jpg">
</div>
<div class="cols">
<img src="images/k_Web-04.jpg">
<img src="images/k_Web-05.jpg">
<img src="images/k_Web-06.jpg">
</div>
<div class="cols">
<img src="images/k_Web-07.jpg">
<img src="images/k_Web-08.jpg">
<img src="images/k_Web-09.jpg">
</div>
<div class="cols">
<img src="images/k_Web-10.jpg">
<img src="images/k_Web-11.jpg">
<img src="images/k_Web-12.jpg">
</div>
</div>
</body>
</html>
You can also use css to set the heights and widths one time. Try this:
HTML:
<div class="img_container">
<div class="port"><img src="images/..."></img></div>
<div class="land"><img src="images/..."></img></div>
</div>
CSS:
.img_container {
width: 250px;
height: 250px;
background-color:grey;
}
.port {
width: 100px;
height: 200px;
}
.land {
width: 200px;
height: 100px;
}
That's better, because you cut the style from code.
Related
Hi I'm trying to create an image gallery that centers rows of images with fixed dimensions. The issue is the number of images in each row will change depending on the window size so I can't use mutiple containers and margin: auto them. Here is an example page that does what I'm after:
http://inspire-gwen.tumblr.com/
You'll notice that as you change the size of the window, the image rows change, but each one is still centered on the page. Is it possible to implement this with purely CSS? This is the code I have written, with some random images:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<div><img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg"></div>
<div><img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg"></div>
<div><img src="http://i.imgur.com/ElxvqJK.jpg"></div>
<div><img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg"></div>
</div>
</body>
CSS
.img_container img {
max-height: 300px;
display: block;
width: auto;
height: auto;
vertical-align: bottom;
}
.img_container div {
padding: 5px;
}
Images are by default inline items, wrapping them in 'div' tags is currently causing them to be block items. You could get by with simpler with this:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
<img src="http://i.imgur.com/ElxvqJK.jpg">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</body>
CSS
.img_container {
text-align: center;
}
.img_container img {
max-height: 300px;
width: auto;
height: auto;
vertical-align: bottom;
margin: 5px;
}
Yes, this is very possible..
so far you have been using px to define the image width... what you need is %.
Here is the JSFIDDLE: http://jsfiddle.net/uh1wvaev/2/
Here is my code:
HTML
<div class="img_container">
<div class="img_wrapper">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
</div>
<div class="img_wrapper">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
</div>
<div class="img_wrapper">
<img src="http://i.imgur.com/ElxvqJK.jpg">
</div>
<div class="img_wrapper">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</div>
CSS
.img_wrapper {
width: 25%;
float: left;
}
img {
width: 100%;
}
What I did was, I gave each <DIV></DIV> a class of "img_wrapper". Then I gave each img_wrapper a width of 25% of the page. Therefore whenever the page is resized, the img will be given a width of 25% of the new window size.
If you have any questions, or need further assistance please leave a comment below
I would like to put one image above another, but all answers I find are using position absolute with specific pixels. I want to achieve it in a responsiveness way, so I would like to avoid strict composition.
Now my code looks like:
<style>
.header{
margin:20px;
text-align:center;
}
.data{
text-align:center;
}
</style>
<body>
<h1>Hello Stack Overflow!</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
I would like to move the .logo img above the background img and, have different classes to move it:
Center center;
Center right;
Center left;
So, my goal is having the possibility to accomplish the following image with a class that can "move" my logo, but always maintaining it above the background image. Note that the background image could have not always the same size.
I did a plunkr to test with where you can reproduce it.
Although this answer uses absolute positioning it is responsive and should work they way you want. This answer also assumes that you have high quality background images that will not lose quality when scaled to a large size.
The logo is centered by default. There is a .logo-right and .logo-left class for side positioning.
There is a small edge case that the logo breaks out a little at small screens when the height of the background image is less than the logo. To account for this you can set the logo width to a percentage and also give it a max-width so that it doesn't enlarge too far if you are using a rasterized (non-svg) logo (see Snippet) .
.header {
margin:20px;
text-align:center;
position: relative;
}
.data{
text-align:center;
}
.background {
height: auto;
width: 100%;
}
.logo {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
max-height: 100px;
position: absolute;
right: 0;
top: 0;
width: auto;
}
.logo-right {
margin-right: 5%;
}
.logo-left {
margin-left: 5%;
}
<h1>Centered</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Right</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-right">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Left</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-left">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
Maybe something like this?
http://plnkr.co/edit/wd6wui?p=preview
<style>
.header {
margin: 20px;
text-align: center;
position: relative;
}
.img-container {
position: absolute;
top: 0;
width: 100%;
}
.data {
text-align: center;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
<div class="header">
<div class="img-container">
<img src="http://lorempixel.com/g/800/200/" class="background">
</div>
<div class="img-container">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
</div>
Not sure I understood your question ;)
wrapping the images in div will do the work
<div><img src="http://lorempixel.com/100/100/" class="logo"></div>
I am trying to get my Div to be centered in the page, however I cannot get it to work properly.
Despite using Margin-left: auto and Margin-Right:auto it still doesn't center in the middle of the page.
Any help would be appreciated!
HTML:
<div class="OuterService">
<div class="service">
<div class="virus" style="width:250px; height:218px;">
<center><h3 style="width:200px; text-align:center">Computer Virus</h3>
<img src="virus.jpg" alt="virus" height="140px"/></center>
</div>
<div class="screenRepair" style="width:250px;">
<center><h3 style="width:auto; text-align:center">Screen Replacement</h3>
<img src="smashedScreen.jpg" alt="BrokenScreen" height="160px"/></center>
</div>
<div class="hardwareRepair" style="height:218px;">
<center><h3>Hardware Replacement</h3>
<img src="hardwareRepair.jpg" alt="hardwareRepair" height="130px"/></center>
</div>
<div class="WindowsReinstall" style="height:218px;">
<center>
<h3>OS Reinstallation</h3>
<img src="windowsInstall.jpg" alt="OS Reinstallation" height="150px;" width="220px;"/>
</center>
</div>
<div class="maintenance" style="width:250px;">
<center>
<h3>System Maintenance</h3>
<img src="SystemMaintenance.jpeg" alt="System Maintenance" height=150px;/>
</center>
</div>
<div class="SoftwareRepair" style="width:250px">
<center>
<h3>Software Repair</h3>
<img src="SoftwareRepair.png" alt="Software Repair" height="150px;" width="220px;"/>
</center>
</div>
<div class="MemoryUpgrades" style="width:250px; height:208px;">
<center>
<h3>Memory Upgrades</h3>
<img src="MemoryUpgrades.jpg" alt="Memory Upgrades" height="140px;"/>
</center>
</div>
<div class="DataRecovery" style="width:250px;">
<center>
<h3>Data Recovery</h3>
<img src="DataRecovery.jpg" alt="Data Recovery" height="150px;"/>
</center>
</div>
</div>
</div>
CSS:
.outerService {
width: auto;
margin-left: auto;
margin-right: auto;
}
.service {
max-width: 1100px;
display: table;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width:250px;
float:left;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border:1px solid #000;
}
You need to specify a width for your class outerService
.outerService
{
width: 70%;
margin-left: auto;
margin-right: auto;
}
Also, if you want outerService to not specify a size you can use flexbox. Assuming that the container of outerService is the body..
body
{
display: flex;
justify-content: center;
}
.outerService
{
width: auto;
}
Flex is currently supported on all major browsers in their current versions but if you're supporting older versions, look here.
Your class name in your HTML uses a capital O for OuterService
Your CSS uses a lower case o for outerService .outerService
Try changing to
.OuterService {
width: auto;
margin-left: auto;
margin-right: auto;
}
For some divs, you have to make the div width fixed at certain px. Try this:
.outerService {
width: 850px;
margin:0 auto;
}
If you want your div to change dynamically under certain screen size you can try the media query to make width with a percentage value.
I've been trying to get this image centered in the page for a while, and for some reason margin-left: auto; margin-right: auto; weren't doing anything. So in the spirit of wildly trying everything in sight, I stumbled on the following surprisingly correct result. My question is, why on earth does setting the width to 25% work? I would have expected 100%, or 50% at least.
This fiddle shows some other widths, which apparently behave in a nonlinear fashion: http://jsfiddle.net/mo85kkvv/
(Bonus question: is there a super-obvious way to use the margin-left/right properties instead that I'm missing?)
HTML:
<body>
<div id="bcontainer">
<img src="banner.png" alt="banner" />
</div>
</body>
CSS:
body {
margin: 0;
}
#bcontainer {
width: 25%; /* why 25%?? */
height: 50px;
display: table-cell;
text-align: center;
}
I don't know a lot about HTML but I think that the proper way to define the class container is:
.container {
height: auto;
display: block;
margin:auto;
}
This is more generic. You can use the element inspector, and see how the layers change.
Is what your after ? http://jsfiddle.net/mo85kkvv/4/
HTML
<body>
<div class="container" id="one">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="two">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="three">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="four">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div>
</body>
CSS
body {
}
.container img{
width:100%;
display: inline;
text-align: center;
margin: 0 auto;
}
#one {
width: 25%;
margin: 0 auto;
}
#two {
width: 50%;
margin: 0 auto;
}
#three {
width: 75%;
margin: 0 auto;
}
#four {
width: 100%;
margin: 0 auto;
}
It all depends what you want. Do you want the wrapper to be centered with the image floating in the center, or do you want the wrapper (in this case .container) to shrink around the image and be the one that floats in the center? I have updated your fiddle with simple examples of a few options.
http://jsfiddle.net/mo85kkvv/6/
So what I'm trying to do is create a mock up for my own little website in HTML. So everything been going good until just now. What I want to do is display an image and then a title and description next to it, sort of like what youtube does.
Example:
So the way I have it right now it works perfectly if the text doesn't have to drop down to a new line.
Example of it working:
However, if one of them is too long, everything gets messed up, example of messed up:
I set up a JS fiddle to make it easier for you guys. However remember I'm designing with bootstrap so the reason the CSS is so long is because it includes the full bootstrap, however only the first 57 lines is my custom written css. Anyway, if anyone could help me so that when my title or my description is too long it will drop onto the next line like youtube does.
My HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<title>Comments</title>
</head>
<body>
<div class="logo">
<img height="70" width="200" src="/img/logo.png">
</div>
<div class="container">
<div class="leftBar">
<div class="well">
<div class="title">
<h3>Mini Title</h3>
</div>
<hr/>
<div class="contentLink">
<div class="smallContentImage">
<img src="http://i.imgur.com/zesaMhG.gif">
</div>
<div class="smallContentText">
<h5>Title Goes Here</h5>
<em>
Other Informati
</em>
</div>
</div>
</div>
</div>
<div class="rightBox">
<div class="well">
<div class="title">
<h1>Title For Content</h1>
</div>
<p> CONTENT CONTENT CONTENT </p>
</div>
</div>
</div>
</body>
</html>
MY CSS
body {
background #FAFAFA;
}
.title {
text-align: center;
}
.logo {
margin-right: auto;
margin-left: 2%;
padding-top: 2%;
}
.leftBar
{
margin-right: auto;
float: left;
width: 30%;
overflow: hidden;
}
.rightBox
{
margin-left: 0;
float: right;
width: 70%;
}
.contentLink
{
padding-left: 1%;
padding-right: 1%;
width: auto;
height: auto;
}
.smallContentImage {
width: 100px;
height: 100px;
margin-left: 0;
margin-right: auto;
float:left;
}
.smallContentText {
float: right;
width: auto;
margin-left: auto;
margin-right: 0;
width: fixed;
}
JS Fiddle: http://jsfiddle.net/BjSv8/
Thank you
There is no such thing as width:fixed. You need to make sure the widths of the two content items add up to the width of the parent.
Is there any reason you used em instead of div.
If you could use 'div' instead of 'em' and define the width , then your problem could be solved.
<div style="word-wrap:break-word;border:1px solid red; width:100px">
Other Information goes here
</div>
See this fiddle: http://jsfiddle.net/BjSv8/1/