i have something up right now that looks decent but, id like to switch up the content 2 area a little bit to swap out the bg to one without a tv ( i know how to do that) and then from there i wanted to put in its place a .png image of a ipad on the left and the text as it is now to the right but, my code is all screwy and for some reason it pops the text down anytime i add the image. i tried using float on both of them but,then there on opposite sides of the screen and to far apart.
so when its all done id like to have the ipad on the left and the text on the right with about a 75-100 px gap between them in the center.
im primarily a programmer these days and i always get confused when it comes to this stuff bc i never know the right way to design a site in such a way that it looks good on most screens.
We’d need to see the version that’s not working to see where you are going wrong.
If you are just swapping the background image then nothing needs to change does it?
If you want to use a foreground image instead of the background image then you would need to remove the 470px left padding from #left and increase its width by 470px. Then float the new image to the left before the element called .coming.
Next wrap the right content (.coming and the text underneath) in a div and float it all right but make sure you give it an appropriate width that fits (290px I think).
Following my instructions above you get this altered CSS.
.left {
[B] width:760px;/* 290 + 470 = 760*/
padding:20px 0 0px 0;/* 470px left padding removed*/[/B]
text-align:left;
font-size:13px;
font-family:Arial;
color:#a6aeb8
}
[B].ipad {
float:left;
width:460px;/* adjust to suit. 470px is maximum but you may want it smaller with some right or left margins */
background:red;/* for testing*/
min-height:300px;/* for testing*/
}
.newright {/* badly named but you get the point */
width:290px;
float:right;
}[/B]
<div id="wrapper">
<div id="content2">
<div id="logo2"><a href="#"><img src="http://oaklanduniversity.tv/images/logo2.png" alt="" /></a></div>
<div class="center">
<div class="complete">Independent Media from Oakland University Students</div>
</div>
<div class="content">
<div class="left">
[B] <div class="ipad">Image of ipad goes here</div>[/B]
[B] <div class="newright">[/B]
<div class="coming">Coming Soon!</div>
Welcome to the OaklandUniversity.tv,<br>
A vlog network project of shows for students by students just like you.
Were currently under <br>
construction and hope to launch officially in the fall
of 2011 to the public. Until then you can stay connected with OUTV by subscribing to our mailing list below or connecting with us via one of the social network bubbles listed below. <br>
<div id="icons"> <a a href="#"><img src="http://oaklanduniversity.tv/images/facebook.png" alt="" /></a><a a href="http://www.youtube.com/oaklanduniversitytv"><img src="http://oaklanduniversity.tv/images/youtube.png" alt="" /></a><a a href="http://www.youtube.com/oaklanduniversitytv"><img src="http://oaklanduniversity.tv/images/twitter.png" alt="" /></a> </div>
<div style="text-align:left">
<form action="http://www.template-guide.com/preview/3081/mail2.php" method="post">
<div class="inp_d2">
<input class="inp2" name="mail" type="text" value="enter your e-mail for updates" onfocus="if (this.value == 'enter your e-mail for updates') this.value = '';" onblur="if (this.value == '') this.value = 'enter your e-mail for updates';" />
</div>
<input type="submit" style="width:71px; height:35px; background:url(http://oaklanduniversity.tv/images/submit.png) no-repeat; border:0px" value=" " />
</form>
<div class="clear"></div>
</div>
[B] </div>
<!-- end the new right section -->[/B]
</div>
<div class="clear"></div>
</div>
</div>
</div>
Here’s the whole page working so you can check you’ve done it correctly (css is in the head for testing only).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>OUTV.CO|OaklandUniversity.tv-A place for all things OU 5 days a week</title>
<script type="text/javascript" src="http://oaklanduniversity.tv/js/jquery.js"></script>
<script src="http://oaklanduniversity.tv/js/cufon-yui.js" type="text/javascript"></script>
<script src="http://oaklanduniversity.tv/js/NidMedium_400.font.js" type="text/javascript"></script>
<script src="http://oaklanduniversity.tv/js/NidLight_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('.complete', { fontFamily: 'NidMedium'});
Cufon.replace('.coming', { fontFamily: 'NidMedium'});
Cufon.replace('.twitter', { fontFamily: 'NidLight'});
</script>
<style type="text/css">
body {
font-family: Tahoma;
margin:0;
padding:0px;
color:#5c5c5c;
font-size:12px;
width:100%;
background:#000000
}
form {
margin:0;
padding:0;
}
img {
border:0px
}
a {
color:#5c5c5c;
font-size:12px;
text-decoration:none;
outline:none
}
a:hover {
text-decoration:underline;
}
ul {
margin:0;
padding:0;
}
li {
margin:0;
padding:0;
list-style:none
}
.clear {
font-size:0px;
clear:both;
height:1px
}
#wrapper {
width:100%;
text-align:left
}
.center {
text-align:center
}
.upper {
text-transform:uppercase
}
#content2 {
width:1000px;
margin:0px auto;
background:url(http://oaklanduniversity.tv/images/bg5.png) no-repeat left top;
height:750px
}
#logo2 {
width:286px;
height:51px;
padding:75px 0 0px 235px;
font-size:0px
}
.complete {
padding:69px 0 42px 0;
margin:0px;
font-size: 24px;
color: #FFFFFF;
letter-spacing:-1px;
font-weight:normal;
line-height:30px;
}
.content {
padding:0 56px 0 75px
}
.left {
width:760px;/* 290 + 470 = 760*/
padding:20px 0 0px 0;/* 470px left padding removed*/
text-align:left;
font-size:13px;
font-family:Arial;
color:#a6aeb8
}
.ipad {
float:left;
width:460px;/* adjust to suit. 470px is maximum but you may want it smaller with some right or left margins */
background:red;/* for testing*/
min-height:300px;/* for testing*/
}
.newright {
width:290px;
float:right;
}
.right {
width:309px;
float:right;
background:url(http://oaklanduniversity.tv/images/bird.png) no-repeat left bottom;
padding-bottom:38px
}
.coming {
padding:0px 0 21px 0;
margin:0px;
font-size: 36px;
color: #FFFFFF;
letter-spacing:-1px;
font-weight:normal;
line-height:30px;
}
#icons {
padding:17px 0 29px 0;
text-align:left
}
#icons img {
padding-left:5px
}
.inp2 {
font-family:Arial;
font-size:12px;
color:#121b25;
width:190px;
border:0px;
margin-top:9px;
background:none
}
.inp_d2 {
background:url(http://oaklanduniversity.tv/images/mail_bg2.gif) no-repeat left top;
border:0px;
height:35px;
padding:0px 0px 0 11px;
width:204px;
float:left
}
.twitter {
padding:0px 0 17px 0;
margin:0px;
font-size: 24px;
color: #FFFFFF;
letter-spacing:-1px;
font-weight:normal;
line-height:30px;
}
#twitter {
padding:0px;
margin:0px
}
#twitter ul {
padding:0px;
margin:0px
}
#twitter ul li {
padding:0px 40px 17px 40px;
margin:0px;
list-style:none;
color:#a6aeb8;
font-size:13px;
font-style:italic;
font-family:Arial;
background:url(http://oaklanduniversity.tv/images/li_bg.png) no-repeat left top;
line-height:17px
}
#twitter ul li span {
color:#ffb400
}
#twitter ul li a {
color:#767b82;
font-size:13px;
font-style:italic;
font-family:Arial
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content2">
<div id="logo2"><a href="#"><img src="http://oaklanduniversity.tv/images/logo2.png" alt="" /></a></div>
<div class="center">
<div class="complete">Independent Media from Oakland University Students</div>
</div>
<div class="content">
<div class="left">
<div class="ipad">Image of ipad goes here</div>
<div class="newright">
<div class="coming">Coming Soon!</div>
Welcome to the OaklandUniversity.tv,<br>
A vlog network project of shows for students by students just like you.
Were currently under <br>
construction and hope to launch officially in the fall
of 2011 to the public. Until then you can stay connected with OUTV by subscribing to our mailing list below or connecting with us via one of the social network bubbles listed below. <br>
<div id="icons"> <a a href="#"><img src="http://oaklanduniversity.tv/images/facebook.png" alt="" /></a><a a href="http://www.youtube.com/oaklanduniversitytv"><img src="http://oaklanduniversity.tv/images/youtube.png" alt="" /></a><a a href="http://www.youtube.com/oaklanduniversitytv"><img src="http://oaklanduniversity.tv/images/twitter.png" alt="" /></a> </div>
<div style="text-align:left">
<form action="http://www.template-guide.com/preview/3081/mail2.php" method="post">
<div class="inp_d2">
<input class="inp2" name="mail" type="text" value="enter your e-mail for updates" onfocus="if (this.value == 'enter your e-mail for updates') this.value = '';" onblur="if (this.value == '') this.value = 'enter your e-mail for updates';" />
</div>
<input type="submit" style="width:71px; height:35px; background:url(http://oaklanduniversity.tv/images/submit.png) no-repeat; border:0px" value=" " />
</form>
<div class="clear"></div>
</div>
</div>
<!-- end the new right section -->
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
Hope that’s what you meant
Note that you should be using heading tags for your headings and not just divs. Your logo should probably be the h1 and the class=complete element should be an h2. Coming soon should be an h3 etc… Don’t use divs when there are better more semantic elements available.
e.g.
this section:
Welcome to the OaklandUniversity.tv,<br>
A vlog network project of shows for students by students just like you.
Were currently under <br>
construction and hope to launch officially in the fall
of 2011 to the public. Until then you can stay connected with OUTV by subscribing to our mailing list below or connecting with us via one of the social network bubbles listed below. <br>
It should be headings and paragraphs and no breaks.
<h3>Coming Soon!</h3>
<h4>Welcome to the OaklandUniversity.tv</h4>
<p>A vlog network project of shows for students by students just like you. We're currently under construction and hope to launch officially in the fall of 2011 to the public. Until then you can stay connected with OUTV by subscribing to our mailing list below or connecting with us via one of the social network bubbles listed below.</p>
Of course you can then style it exactly as you had it before but thye semantic structure must come first.
been trying for about 2 hours now. idk i guess ill just keep at it .
