The problem I'm having is that my pictures are moving when I start stretching the internet browser. It needs to be a specific width for all the pictures to be inline. I want to make it so my pictures stay inline regardless of how stretched the internet browser gets.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "scrolling">
<div class = "quick-info"> <!--Start quick-info-->
<div class="image"> <!--Start1-->
<img src="http://d39ya49a1fwv14.cloudfront.net/wp-content/uploads/2013/07/0x600.jpg" height="340" width="250"/>
</div>
<div class="image"> <!--Start2-->
<img src="http://gstylemag.com/wp-content/uploads/2014/05/Lebron-James-2.jpg" height="340" width="257"/>
</div>
<div class="image"> <!--Start3-->
<img src="http://upload.wikimedia.org/wikipedia/commons/8/8d/President_Barack_Obama.jpg" height="340" width="257"/>
</div> <!--End3-->
<div class="image"> <!--Start4-->
<img src="http://www.zooatlanta.org/media/image/panda_cubs2013_140402_meilun_meihuan_ZA_0769_600.jpg" height="340" width="257"/>
</div> <!--End4-->
<div class="image"> <!--Start5-->
<img src="http://www.soflasun.com/wp-content/uploads/2014/12/dog8.jpg" height="340" width="259"/>
</div> <!--End5-->
</div> <!--End of quick-info-->
</div>
</body>
</body>
</html>
CSS:
.quick-info {
background-color:#659CEF;
height: 350px;
font-family: Garamond;
font-size: 16px;
}
.image {
display: inline;
padding: 0px;
margin: 0px;
float: left;
border: 0px;
}
#text {
position: absolute;
top: 270px;
width: 257px;
height: 85px;
}
The pictures used in this code are just temporary pictures I put up to make for this example. Any help will be really appreciated! I'm not an HTML pro so sorry if I didn't do something as per the HTML regulations but please do help me! I've been stuck on this for days. Thank you so much!
I modified your css with the following CSS
.quick-info {
background-color:#659CEF;
height: 350px;
width:1600px;
font-family: Garamond;
font-size: 16px;
}
div.scrolling {
width:800px;
overflow-x:scroll;/*not really needed but it made the fiddle easier to navigate*/
height:350px;
display:inline-block;
}
You need to define a width on your containers, and then the images will flow into line.
In my example (visible at http://jsfiddle.net/9f0rhe3w/ ) you can see that it flows side by side. Just make sure the width of .quick-info is always at least the width of all images displayed combined.
I added the overflow scroll, but you could also add a position relative to .quick-info and a position:absolute to .scrolling and then move it with a timer to get a ticker tape.
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 have a page with the following structure:
<body>
<div id="page">
<div id="header-container">
<header>
</header>
</div>
<div id="main-container">
<div id="main" class="site-main">
<div id="sidebar-container">
<div id="sidebar">
</div>
</div>
<div id="content-container">
<div id="main-banner-container">
<div id="main-banner-holder">
<img id="main-banner" src="http://dummyimage.com/900x300/000/fff" />
</div>
</div>
<div id="content" class="content" role="main">
</div>
</div>
</div>
<div id="footer-container">
<footer>
<div id="footer-images">
</div>
</footer>
</div>
</div>
</div>
</body>
And formatted with the following CSS:
body {
margin: 0 auto;
width: 70%;
background-color: rgb(0,114,187);
font-family: verdana;
}
#header-container {
padding-bottom: 15px;
padding-top: 20px;
padding-left: 35px;
padding-right: 35px;
height: 190px;
}
header {
position: fixed;
width: 66%;
padding-top: 30px;
top: 0px;
}
#sidebar-container {
height:500px;
width:320px;
float:right;
}
#sidebar {
position: fixed;
color: rgb(211,34,52);
padding: 10px;
right: 16.5%;
top:226px;
}
#content-container {
width: 72%;
}
#main-banner-container {
max-width: 900px;
}
Viewing the page on a widescreen shows the content fine. However, as I reduce the window size, or if I view the site on a lower resolution screen, the fixed image and the text underneath it starts to obscure the sidebar, even though it does scale a little. Furthermore, when the page is scrolling, even though some of the text move to make space for the sidebar, the text below it overlaps when scrolled.
A rough example of the problem can be seen here: http://jsfiddle.net/4WQzP/
What changes do I need to make?
EDIT: To clarify, I was hoping a plain CSS/HTML based fix. Javascript is an option, though I'm trying to avoid it since I haven't really used it in this site so far.
for using an adaptive design used two ways)), the first is to use the bootstrap framework, the second is writing media queries
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.
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/
I want to create my first web page but I encountered a problem.
I have the following code:
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
I'd like to know how to make the logo and the H1 to be in the same line.
Thanks!
As example (DEMO):
HTML:
<div class="header">
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
</div>
CSS:
.header img {
float: left;
width: 100px;
height: 100px;
background: #555;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
DEMO
Try this:
Put both elements in a container DIV.
Give that container the property overflow:auto
Float both elements to the left using float:left
Give the H1 a width so that it doesn't take up the full width of it's parent container.
If your image is part of the logo why not do this:
<h1><img src="img/logo.png" alt="logo" /> My website name</h1>
Use CSS to style it better.
And it is also best practice to make your logo a hyperlink that take the user back to the home page.
So you could do:
<h1 id="logo"><img src="img/logo.png" alt="logo" /> My website name</h1>
Try this:
<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
Just stick the img tag inside the h1 tag as part of the content.
you can do this by using just one line code..
<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
You can do it as Billy Moat told you, wrap your <img> and <h1> in a <div> and use float: left; to float your image to the left, set the <div> width and than set a line-height for your h1 and use <div style="clear: float;"></div> to clear your floating elements.
Fiddle
I'd use bootstrap and set the html as:
<div class="row">
<div class="col-md-4">
<img src="img/logo.png" alt="logo" />
</div>
<div class="col-md-8">
<h1>My website name</h1>
</div>
</div>
This is my code without any div within the header tag. My goal/intention is to implement the same behavior with minimal HTML tags and CSS style. It works.
whois.css
.header-img {
height: 9%;
width: 15%;
}
header {
background: dodgerblue;
}
header h1 {
display: inline;
}
whois.html
<!DOCTYPE html>
<head>
<title> Javapedia.net WHOIS Lookup </title>
<link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
<header>
<img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
<h1>WHOIS Lookup</h1>
</header>
</body>
output:
in your css file do img { float: left; } and h1 {float: left; }
Check this.
.header{width:100%;
}
.header img{ width: 20%; //or whatever width you like to have
}
.header h1{
display:inline; //It will take rest of space which left by logo.
}
<head>
<style>
header{
color: #f4f4f4;
background-image: url("header-background.jpeg");
}
header img{
float: left;
display: inline-block;
}
header h1{
font-size: 40px;
color: #f4f4f4;
display: inline-block;
position: relative;
padding: 20px 20px 0 0;
display: inline-block;
}
</style></head>
<header>
<a href="index.html">
<img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
<a href="index.html">
<h1><span> Technocrat</span> Blog</h1></a>
</div></header>
Steps:
Surround both the elements with a container div.
Add overflow:auto to container div.
Add float:left to the first element.
Add position:relative; top: 0.2em; left: 24em to the second element (Top and left values can vary according to you).