5 Replies - 901 Views - Last Post: 06 July 2013 - 08:47 PM

#1 newcode  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 04-July 13

How can I position my gallery horizontal (css) Help!

Posted 04 July 2013 - 12:52 PM

I kind of have it screwed up because I am using inline and attaching a style sheet
but my light box gallery will not line up horizontal it just stays vertical.
I am just trying to position it between two div tags... div billboard and div footer..thanks in advance





<style type="text/css">
body {
	background-image:url(bck2.png);
	background-repeat: repeat;
}
#wrapper #header {
	/*color: #EEE;*/
	font-size: larger;
}
#wrapper #header {
	font-size: larger;
}
</style>
<head>

.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>


<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<script src="jquery-1.7.2.min.js"></script>
<script src="lightbox.js"></script>
<link href="lightbox.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<div id="wrapper">

<div id="header"> <!--<a href="work.html"><img src="bck.png" alt="Portfolio" width="100px" height="100px"></a></a>--></div>
<p>
</p>


<p>
</p>
<div id="maincontent">
<!--Preston Moore for spelled for name brand-->
<div id="namebrand"><h1>Preston Moore</h1></div>
<div id="navbar">
<ul>
<li class="contact"><a href="contact.html"><img src="ContactButton.png" height="75px" width="75px"></a></li>

<li class="porfolio"><a href="work.html"><img src="Portfoliobutton.png" height="75px" width="75px"></a></li>

<li class="resume"><a href="work.html"><img src="Resumebutton.png" height="75px" width="75px"></a></li>

<li class="about"><a href="about.html"><img src="Aboutbutton.png" height="75px" width="75px"></a></li>

<li class="home"><a href="index.html"><img src="homebutton.png" alt="Home" width="75px"height="75px"></a></li>
</ul>
</div>
<div id="billboard">
<div id="gallery">
<a href="Owlcrest II.png" rel="lightbox[roadtrip]"><img src="Owlcrestpre.png"></a>


<a href="Mika.png" rel="lightbox[roadtrip]"><img src="Mikapre.png"></a><p></p>


<a href="Lions wharf.png" rel="lightbox[roadtrip]"><img src="lionspre.png"></a>

<a href="NICE N CLEAN.png" rel="lightbox[roadtrip]"><img src="nicencleanpre.png"></a>

<a href="Vwagon.png" rel="lightbox[roadtrip]"><img src="Vwagonpre.png"></a>

<a href="Redgulf-Ipad(1).png" rel="lightbox[roadtrip]"><img src="lionspre.png"></a>

<a href="Mika.png" rel="lightbox[roadtrip]"><img src="Mikapre.png"></a>

<a href="Owlcrest II.png" rel="lightbox[roadtrip]"><img src="Owlcrestpre.png"></a>
<a href="Lions wharf.png" rel="lightbox[roadtrip]"><img src="lionspre.png"></a>
<a href="NICE N CLEAN.png" rel="lightbox[roadtrip]"><img src="nicencleanpre.png"></a>
<a href="Vwagon.png" rel="lightbox[roadtrip]"><img src="Vwagonpre.png"></a>
<a href="Redgulf-Ipad(1).png" rel="lightbox[roadtrip]"><img src="lionspre.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>	
<!--<div id="adspace">
</div>	
<div id="morespace">
	</div>-->	
</body>
</html>



<!--Css>
@charset UTF-8;

@import url(http://fonts.googleapis.com/css?family=Permanent+Marker|Mr+Bedfort);
/*font-family: 'Permanent Marker', cursive;
font-family: 'Mr Bedfort', cursive;*/


#header

{
	background-color: #EC592E;
	height: 140px;
	font-size: xx-large;
	background-image: url(bck.png);
	background-repeat: repeat;
	}
	
	
#wrapper

{
	background-color: #9AA297;
	height: 900px;
	position:relative;
	width: 960px;
	margin-top: 10px;
	margin-right: auto;
	float: none;
	padding: 10px;
	margin-bottom: auto;
	margin-left: auto;
	
}
		
#maincontent{
	height: 600px;
	background-image: url(bck.png);
	background-color: #000;
	background-repeat: repeat;
	background-position: center center;
}


#namebrand{
	font-family: 'Permanent Marker';
	/*font-family: 'Mr Bedfort', cursive;*/
	color: #fff;
	height: 40px;
	width: 500px;
	margin-top: 20px;
	margin-left: 130px;
	background-image: none;
	background-repeat: no-repeat;
	
	}
	

	
	

	#navbar{
	height:100px;

	width:900px;
	float:right;
	}
	
	
	#billboard{
	height:400px;
	width: 900px;
	
	}
	
	
	
	#sitePic{
	padding: 20px;
	margin-top: 10px;
	margin-right: 0px;		
		
		
		
		}
	#gallery{
		
	height:280px;

	width:900px;
	floa}
/*#footer{
	/*background-color:#EB4F2D;
	background-color:#AE2E1E;
	height: 230px;
	width: 980px;
	position:relative;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	
}*/
/*#adspace{
	background-color:#EB4F2D;
	
	height: 190px;
	width: 980px;
	position:relative;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	
}

#morespace{
	background-color:#EB4F2D;
	background-color:#000;
	height: 100;
	width: 980px;
	position:relative;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	
}*/

ul
{
list-style-type:none;
margin:0;
padding:5px;
overflow:hidden;
}
li
{
float:right;
}
a 
{
display:block;
width:80px;

}
/*hover state*/
li.home a:hover{background-color:#EC592E;

	}
li.about a:hover{background-color:#9AA297;
	}
li.porfolio a:hover{background-color:#EC592E;
	}
li.resume a:hover{background-color:#9AA297;
	}
li.contact a:hover{background-color:#EC592E;
	}



Is This A Good Question/Topic? 0
  • +

Replies To: How can I position my gallery horizontal (css) Help!

#2 newcode  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 04-July 13

Re: How can I position my gallery horizontal (css) Help!

Posted 05 July 2013 - 06:11 PM

no help yet?
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3614
  • View blog
  • Posts: 12,437
  • Joined: 12-December 12

Re: How can I position my gallery horizontal (css) Help!

Posted 05 July 2013 - 06:53 PM

You have a broken bit of css on line 198. Correct this first.

Line 16 and the area around this is broken as well.

Gosh, your head and body tags aren't right either. Use the HTML and CSS validators linked in my signature to help you.

When you've corrected the errors, re-post your HTML page and css (separately).

This post has been edited by andrewsw: 05 July 2013 - 06:54 PM

Was This Post Helpful? 0
  • +
  • -

#4 newcode  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 04-July 13

Re: How can I position my gallery horizontal (css) Help!

Posted 06 July 2013 - 09:56 AM

I must have been tired when I pasted my code.. here's the way I was trying to post it. thanks in advance.

<script src="lightbox/js/jquery-1.7.2.min.js"></script>
<script src="lightbox/js/lightbox.js"></script>
<style type="text/css">
body {
	
	background-repeat: repeat;
}
#wrapper #header {
	/*color: #EEE;*/
	font-size: larger;
}
#wrapper #header {
	font-size: larger;
}

#wrapper #header #namebrand h1 .contactInfo {
	text-align: right;
	display: block;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	vertical-align: middle;
}
</style>
</head>

<link href="gallery.css" rel="stylesheet" type="text/css">
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<body>

<div id="wrapper">

<div id="header"><div id="namebrand">
  <h1>Preston Moore   <!-- <span class="contactInfo">preston@iikonmedia.com</span>--></h1>
</div><div id="navbar">
<ul>
<li class="contact"><a href="contact.html"><img src="contactBtn.png" alt="conact" width="75" height="75"></a></li>

<li class="porfolio"><a href="work.html"><img src="workBtn.png" alt="portfolio" width="75" height="75"></a></li>

<li class="resume"><a href="resume.html"><img src="resumeBtn.png" alt="resume" width="75" height="75"></a></li>

<li class="about"><a href="about.html"><img src="aboutaBtn.png" alt="about" width="75" height="75"></a></li>

<li class="home"><a href="index.html"><img src="homBtn.png" alt="Home" width="75"height="75"></a></li>
</ul>
</div>
</div>



<div id="maincontent">



<div id="billboard">
<!--here is where I need the lightbox to layout horizontially-->
<a href="sne.png" rel="lightbox[roadtrip]"><img src="Owlcrestpre.png"></a>
<a href="Owlcrest II.png" rel="lightbox[roadtrip]"><img src="Owlcrestpre.png"></a>
<a href="Mika.png" rel="lightbox[roadtrip]"><img src="Owlcrestpre.png"></a>

	</div>			  
</div>
</div>
</div>
</div>
<div id="footer">
	</div>	
 <div id="adspace">
	</div>	
 <div id="morespace">
	</div>	
</body>
</html>



#contactInfo{
		top:0px;
		right:3px;
		
		}
#header

{
	height: 200px;
	/*background-image: url(bck.png);*/
	background-repeat: repeat;
	}
	
	
#wrapper

{
	/*background-color: #9AA297*/;
	height: 900px;
	position:relative;
	width: 960px;
	margin-top: 10px;
	margin-right: auto;
	float: none;
	padding: 10px;
	margin-bottom: auto;
	margin-left: auto;
	
}
	
	#navbar{
	height: 60px;
	width:900px;
	float:left;
	position:fixed;
	margin-top: 0px;

	/*background-color:#EC592E;*/
	
	}	
#maincontent{
	height: 600px;
	/*	background-image: url(remix.png);*/
	
	
		background-repeat: no-repeat;
	background-position: center center;

	margin-top:5px;

}


#namebrand{
	/*font-family: 'Holtwood One SC', serif;*/
	font-family: 'Bilbo Swash Caps', cursive;
	/*font-family: "Permanent Marker";*/
/*	font-family: 'Cinzel Decorative', cursive;*/
	/*font-family: 'Mr Bedfort', cursive;*/
	color:#F63;
	height: 110px;
	width: 800px;
	position:absolute;

	margin-top: 15px;
	margin-left: 5px;
	background-image: none;
	background-repeat: no-repeat;
	font-size: 50px;
	}
	#billboard{
	display: block;
	padding: 13px;
	height: 150px;
	width: 960px;
	margin-top: 10px;
	margin-right: 0px;	
	float:right;	
		
		
		}

	
ul
{
list-style-type:none;
margin:0;
padding:5px;
overflow:hidden;
}
li
{
float:right;
}
a 
{
display:block;
width:80px;

}
/*hover state*/
li.home a:hover{background-color:#FF3;

	}
/*li.about a:hover{background-color:#9AA297;*/
li.about a:hover{background-color:#FF3;

	}
li.porfolio a:hover{background-color:#FF3;
	}
li.resume a:hover{background-color:#FF3;
	}
li.contact a:hover{background-color:#FF3;
	}
a:hover{
	-webkit-border-radius: 80px;
	-moz-border-radius: 80px;
	border-radius: 80px;
	vertical-align: middle;
	display: block;
	font-size: 36px;
	font-family: Verdana, Geneva, sans-serif;
	color: #F63;
	text-decoration: none;
}
#wrapper #maincontent #billboard a h1 {
	font-family: Verdana, Geneva, sans-serif;
	color: #F63;
	text-decoration: none;
	font-size: 18px;
}

This post has been edited by andrewsw: 06 July 2013 - 10:26 AM
Reason for edit:: Code tags

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3614
  • View blog
  • Posts: 12,437
  • Joined: 12-December 12

Re: How can I position my gallery horizontal (css) Help!

Posted 06 July 2013 - 11:08 AM

You have given those a-tags display: block in the css; no other css-rules affect these elements.

I have no idea how lightbox will influence these elements but, purely in terms of css, it is display: block that is causing them to sit vertically under each other.

Please also learn to use the code-tags. It tells you how to do this directly in the area where you are typing your post. Press the Preview Post button until it is correct.

This post has been edited by andrewsw: 06 July 2013 - 11:10 AM

Was This Post Helpful? 0
  • +
  • -

#6 newcode  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 04-July 13

Re: How can I position my gallery horizontal (css) Help!

Posted 06 July 2013 - 08:47 PM

Thanks, removing the "display:block; helped but now I have another issue.
when I remove the display block, now my nav bar hover state disappears.
Im just going to have to start over to get it to work.
thanks for your help.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1