Fri, 2013-02-22 15:15
here's the page: architecturalvisualisation3d.co.uk/hire-me/
So there's hireWrapper in red which contains two divs, hireMeText (just a line of text( and hireME (a form).
I've set each to have a distinct background so it's easier to find them. Wrapper in red, text in blue, form in yellow.
But a) I can't even see the color of the other divs, b) when I use a browser developer tool, their boundaries seem to stretch beyond the 450px I've set them and c) the wrapper isn't centered as per the margin auto.
Never managed to figure out in-line stuff so this would be good to know!
Fri, 2013-02-22 15:17
#1
PS. Code... #hireWrapper
PS. Code...
#hireWrapper { margin-left:auto; margin-right:auto; width: 1200px; height: 1200px; background-color: red; } #hireMeText { width: 450px; height: 800px; background-color: blue; display: inline; position:relative; } #hireMe { width: 450px; height: 800px; background-color: yellow; display: inline; position:relative position:relative; }
<div id="hireWrapper"> <div id="hireMeText"> <h2>Hire Me</h2> Please use the form on the right to contact me about your 3d architectural visualisation project. </div> <div id="hireMe">[formidable key=z9ncls]</div> </div>
Fri, 2013-02-22 23:19
#2
I got it to work by just
I got it to work by just having each element float left and right. But I'm still curious as to how to get things to line up in-line.
Sat, 2013-02-23 00:27
#3
I'm not sure what you want
I'd do this:
.hentry {
margin: 0 0 48px;
overflow: hidden;
}
.entry-content, .entry-summary {
font-size: 18px;
margin: 0;
overflow: hidden;
padding: 8px 0 0;
text-decoration: none;
}
#hireWrapper {
height: 660px;
margin-left: auto;
margin-right: auto;
width: 1000px;
}
#hireMeText {
float: left;
height: 600px;
width: 450px;
}
#hireMe {
float: right;
height: 600px;
width: 450px;
}
The following needs to be got rid of, or some content added.
<div id="colophon"> </div> <div id="footerBottom"> </div> <div id="colophon-bot"> </div>
I'd do the following also:
#footerLinks {
height: 20px;
left: 0;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
position: relative;
top: 75px;
width: 600px;
}
In fact, I'd recode the footer like so:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type" />
<title>test doc</title>
<!-- hack for bug in Web Developer addon for Firefox -->
<link rel="stylesheet"
type="text/css"
href="x" />
<style type="text/css">
body {
background-color: darkgray;
margin: 0;
}
ul#footer-menu {
display: inline-block;
list-style-type: none;
padding: 0;
}
#footer {
border: 1px dotted silver;
color: white;
display: table;
margin: 1.2em auto;
white-space: nowrap;
}
#copy-notice {
border-right: 6px double;
display: inline-block;
padding-right: 10px;
}
#footer a {
color: inherit;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
li {
display: inline-block;
margin: 0 10px;
}
#wrapper {
margin: 0 auto;
width: 960px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="footer">
<p id="copy-notice">
<a rel="home"
title="Architectural Visualisation 3d"
href="/">
Architectural Visualisation 3d © 2013</a>
</p>
<ul id="footer-menu">
<li><a title="Home"
href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/contact/">Contact</a></li>
<li><a href="/hire-me/">Hire Me</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
</ul>
</div> <!-- end footer -->
</div> <!-- end wrapper -->
</body>
</html>I have too much time on my hands.
cheers,
gary