Gå til innhold

[Løst] CSS: Hvordan gjøre området for bildet større?

_Johan_

Av _Johan_
i Programmering og webutvikling

Anbefalte innlegg

_Johan_

_Johan_

Skrevet
Skrevet

Jeg prøver å lage en enkel nettside: http://latajacyjogin.weebly.com/

 

Og spørsmålet er enkelt, men jeg greier ikke å finne ut av dette. Som en ser, så er selve boksen på siden ganske stor og fin, og i denne boksen er en rød boks. Nå er det bare rødt, men jeg kommer til å erstatte dette røde området med et bilde.

 

Men, hvordan kan jeg få den røde boksen større, slik at det også når ut til høyre side av den hvite boksen? Men andre ord, hvordan kan jeg få den rød boksen bredere.

 

CSS og HTML er lagt ved under.

 

Tusen takk!

 

CSS

 

/*

Theme Name: MistyLook

Theme URI: http://wpthemes.info

Description: A real clean template by <a href="http://wpthemes.info" title="Sadish">Sadish Bala</a> , influenced by <a href="http://reorganize.ca" target="_blank">ReOrganize</a>. Support is available at <a href="http://forums.wpthemes.info/" title="Forums">Forums</a>.

Version: 3.2

Author: Sadish

Author URI: http://simpleinside.com

*/

* {

padding: 0;

margin:0;

}

p {

margin: 0.5em 0;

line-height:1.5;

}

 

 

 

.clear {

clear:both;

height:20px;

}

blockquote

{

color:#666;

margin: 1em;

padding: 0 0 10px 50px;

background: url(blockquote.gif) no-repeat left top;

}

fieldset

{

border:0;

}

a

{

text-decoration:none;

}

a:link, a:visited {

color: #6688ff;

}

p a:hover, a:active {

border-bottom:#963 1px solid;

}

h1, h2, h3, h4, h5, h6

{

font-family:Georgia, Verdana, Arial, Serif;

line-height:1.5;

}

 

#container {

border: #ccc 1px solid;

background: #fff;

margin: 0 auto;

width: 900px;

position: relative;

text-align: left;

}

#navigation {

background: transparent;

margin: 0 auto 0;

overflow: hidden;

width: 850px;

position: relative;

text-align: left;

font-family: Trebuchet MS,Tahoma, Verdana, Arial, Serif;

}

html #navigation {

height: 1%;

}

#navigation ul li {

float: left;

margin: 0 5px 0 0;

list-style-type: none;

}

#navigation ul li a {

border: #dedede 1px solid;

border-bottom:none;

padding: 2px 10px 2px 9px;

display: block;

font-weight:bold;

color:#666;

text-decoration: none;

background:#ededed;

letter-spacing:0px;

}

#navigation ul li a:hover, #navigation ul li a:active, #navigation ul li.current_page_item a {

background: #fff;

color: #333;

border: #ccc 1px solid;

border-bottom:none;

}

#active a:link {

background: #fff;

color:#333;

}

#active a:hover {

background: #fff;

color:#333;

}

#active a:visited {

background: #fff;

color:#333;

}

#navigation ul li.search {

font-size: 0.9em;

right: 0;

position: absolute;

top: 0;

}

#navigation ul li.search input#searchsubmit {

border: #999 1px solid;

font-size: 0.9em;

background: #ddd;

margin: 0 0 0 2px;

color: #265e15;

padding: 2px;

}

#headertext {

clear: both;

float: left;

margin:0;

height:10px; }

height: 1px

margin: 10px 5px;

width: 100%;

}

#headertext h1

{

font-size:1.8em;

margin:10px 0 0 10px;

font-variant:small-caps;

letter-spacing:0px;

}

#headertext h1 a {

 

text-decoration:none;

border:0;

}

#headertext h2

{

margin:5px 0 0 10px;

font-size:1em;

font-weight:normal;

font-family:Tahoma, Verdana, Arial, Serif;

letter-spacing:0px;

}

#feedarea {

padding:10px 10px 0 0;

float: right;

text-align: right;

}

html #feedarea {

padding-top: 10px;

}

#feedarea dl dt {

display: inline;

margin-right: 5px;

height: 45px;

}

#feedarea dl dd {

display: inline;

margin-right: 5px;

height: 45px;

background:url(icon_feed.gif) no-repeat left center;

padding-left:16px;

}

#header-outer {

clear: both;

margin: 10px;

padding: 0;

color: #fff;

height: 200px;

width: 760px;

background: #fff url(%%HEADERIMG%%) no-repeat;

}

html #header-outer {

margin-top: 0;

}

 

#content {

margin: 10px 20px;

}

 

 

 

#content h3 {

font-size: 1.4em;

font-weight:normal;

margin: 1em 0 0;

color: #265e15;

}

#content h4 {

font-size: 1.1em;

margin: 1em 0 0 0;

}

#content h5 {

font-size: 1em;

margin: 1em 0;

}

#content-main ul

{

margin:0 1em;

padding:0 1em;

list-style-image:url(bullet.png);

}

#content-main ul.asides

{

margin:0;

padding:2em;

border-bottom:#ddd 1px dashed;

}

#content ol

{

list-style-type:decimal;

margin:1em;

padding:0 1em;

}

#content-main {

float: left;

width: 520px;

margin-right: 20px;

}

html #section-index #content-main {

margin-right: 20px;

}

#content .post

{

padding:0 0 2em 0;

border-bottom:#ddd 1px dashed;

}

#content h2

{

font-size: 1.5em;

margin: 0.5em 0;

font-weight:normal;

line-height:1.5;

letter-spacing:0px;

}

#content .entry

{

margin:1em 0;

padding-right:1em;

}

#content .entry a:link, #content .entry a:visited

{

border-bottom:#963 1px dashed;

}

#content .entry a:hover, #content .entry a:active

{

border-bottom:#963 1px solid;

}

#content .post-info , #content .postmetadata

{

font-size:0.9em;

color:#999;

margin:0;

padding:0;

}

#content .post-info,

#content h2.pagetitle

{

background:url(underline1.jpg) no-repeat left bottom;

padding-bottom:15px;

}

#sidebar {

float: left;

width: 200px;

font-size:0.9em;

}

#sidebar ul

{

list-style:none;

margin:0;

padding:0;

}

#sidebar li

{

margin-bottom:5px;

}

#sidebar ul ul

{

list-style:none;

margin:0.5em 0 0 1em;

}

#sidebar ul ul ul

{

margin:0 0 0 1em;

}

li.sidebox {

padding:10px;

background: url(sideheadtop.gif) #ededed no-repeat left top;

margin-bottom: 10px;

}

html li.sidebox {

padding-bottom: 10px;

}

li.sidebox h2 {

font-weight: normal;

font-size: 1.4em;

text-align: left;

color: #242;

font-variant:small-caps;

letter-spacing:0px;

}

li#sidelinks ul

{

margin:0;

padding:0;

}

#sidebar li.sidebox p img {

margin:0;

padding:3px;

border:#ccc 1px solid;

background:none;

}

 

#footer {

clear: both;

background: transparent;

margin: 0 auto;

width: 760px;

text-align: left;

}

html #footer {

height: 1%;

}

#footer p {

float: left;

width: 50%;

line-height: 1.2em;

}

#footer p.right {

float: right;

margin: 0.8em 0;

width: 50%;

text-align: right;

font-size: 0.9em;

color:#999;

}

#comments, #respond{

margin: 0;

padding:1em 0 0 0;

}

#commentform

{

margin:10px 0;

padding:10px;

background:#f9fcfc;

border-top: #ddd 1px solid;

border-bottom: #ddd 1px solid;

}

.commentnum

{

font-size:1.5em;

font-weight:bold;

margin:0 5px 0 0;

}

#container .commentlist {

margin: 1em 0;

padding: 0;

border-top: #ddd 1px solid;

}

.commentlist li

{

list-style:none;

margin: 0;

padding: 1em 0.5em;

background:#fff url(shadow_top.gif) repeat-x top;

border-bottom: #ddd 1px solid;

 

}

.commentlist li.alt

{

background:#f9f9f9;

}

.commentlist li.authorcomment

{

border:#fc9 1px solid;

}

.commentlist li .cmtinfo

{

font-size:1em;

}

.commentlist li cite

{

font-style:normal;

font-weight:bold;

}

.commentlist li .cmtinfo em

{

float:right;

margin:0;

padding:0;

font-style:normal;

font-size:0.9em;

color:#999;

}

#content .commentsfeed

{

background:url(icon_feed.gif) no-repeat left center;

padding-left:16px;

}

#content .trackback

{

background:url(link.gif) no-repeat left center;

padding-left:20px;

}

input.textbox, textarea

{

border:#ccc 1px solid;

background:#fff url(shadow_top.gif) repeat-x top;

font:1em Verdana, Arial, Serif;

padding:2px;

width:150px;

}

textarea{

width: 90%;

padding:10px;

line-height:2em;

height: 20em;

}

input.textbox:focus, textarea:focus

{

background:#fff url(shadow_top.gif) repeat-x top;

border:#999 1px solid;

}

#submit

{

padding:3px 5px;

}

.post h4

{

font-size:1em;

font-weight:normal;

font-family:Verdana, Tahoma, Arial, Serif;

}

.post h4 em

{

font-style:normal;

float:right;

font-weight:normal;

}

#headertext, #sidebar, #footer, .widget {

overflow: hidden;

}

body

{

background: #f9f9f0;

padding: 20px 0 0 0;

font: 76%/1.6em verdana, tahoma, arial, sans-serif;

color: #333;

text-align: center;

}

 

/****************************** flyout menus ******************************/

 

#weebly-menus .weebly-menu-wrap {

z-index: 5000;

}

 

#weebly-menus .weebly-menu {

padding: 0;

margin: 0;

list-style: none;

}

 

#weebly-menus .weebly-menu li {

float: left;

clear: left;

width: 170px;

text-align: left;

}

 

#weebly-menus .weebly-menu li a {

position: relative;

display: block;

width: 100%;

background: #ffffff;

border-right: 1px solid #ccc;

border-left: 1px solid #ccc;

border-bottom: 1px solid #ccc;

text-decoration: none;

font-family: Trebuchet MS,Tahoma, Verdana, Arial, Serif;

font-size: 11px;

font-weight: normal;

line-height:1;

padding:3px;

color: #000;

}

 

#weebly-menus .weebly-menu li a:hover {

background: #e3e3e3;

}

 

#weebly-menus span.weebly-menu-title {

display: block;

padding: 5px 10px;

}

 

#weebly-menus span.weebly-menu-more {

background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;

display: block;

position: absolute;

right: 5px;

top: 0;

font-family: Courier;

height: 28px;

line-height: 28px;

padding:1px 0 3px 0;

}

 

 

 

 

HTML

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head profile="http://gmpg.org/xfn/11">

<title>{title}</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

 

<body id="section-index">

 

<div id="navigation">

 

{menu}

 

</div><!-- end id:navigation -->

 

 

<div id="container">

 

 

<div id="headertext">

<h1>{title}</h1>

</div><!-- end id:header -->

 

 

<div id="header-outer" class="wsite-header">

 

<div> </div>

</div>

<!-- end id:headerimage -->

 

<div id="content">

 

{content}

 

</div><!-- end id:content -->

</div><!-- end id:container --><div id="footer">

<p><span id='weeblyFooter'>{footer}</span></p>

<br class="clear" />

</div><!-- end id:footer -->

 

</body>

</html>

Lenke til kommentar

Videoannonse

Videoannonse
Annonse

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...