HTML&；CSS布局帮助_Css_Html_Layout

HTML&；CSS布局帮助

css html layout

HTML&；CSS布局帮助,css,html,layout,Css,Html,Layout,我正在尝试创建一个左侧有侧边栏、右侧有内容的布局，这是我第一次创建具有此布局类型的网站：更新： <!DOCTYPE html> <head> </head> <body> <div id ="wrapper"> <div id ="header"> <h1 id = "companyName"></h1>

我正在尝试创建一个左侧有侧边栏、右侧有内容的布局，这是我第一次创建具有此布局类型的网站：

更新：

<!DOCTYPE html>
    <head>
    </head>
    <body>
        <div id ="wrapper">
            <div id ="header">
            <h1 id = "companyName"></h1>
            <h4 id = "companyQuote">""</h4>
            </div>
    <div id="leftCol">
     <nav>
            <ul>
            <?php if($this->session->userdata('logged_in')): ?>
                <li><?php echo anchor('admin/dashboard', 'Dashboard');?></li>
                <li><a>Edit Pages<a>
                <?php if(is_array($cms_pages)): ?>
                        <ul>
                            <?php foreach($cms_pages as $page): ?>
                            <li><a href="<?=base_url();?>admin/editpage/index/<?= $page->id ?>/<?php echo url_title($page->name,'dash', TRUE); ?>"><?=$page->name?></a></li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                    </li>
                <li><a>Gallery</a>
                <ul>
                    <li><?php echo anchor('admin/addimage','Add Image');?></li>
                    <li><?php echo anchor('admin/deleteimage','Delete Image');?></li>
                </ul>
                </li>
                <li><a>Sales</a>
                <ul>
                    <li><?php echo anchor('admin/addsale','Add Sale');?></li>
                    <li><a>Edit Sale</a>
                                <?php if(is_array($sales_pages)): ?>
                                        <ul>
                                            <?php foreach($sales_pages as $sale): ?>
                                            <li><a href="<?=base_url();?>admin/editsale/index/<?= $sale->id ?>/<?php echo url_title($sale->name,'dash', TRUE); ?>"><?=$sale->name?></a></li>
                                            <?php endforeach; ?>
                                        </ul>
                                    <?php endif; ?>
                                    </li>
                    </li>
                    <li><?php echo anchor('#','Delete Sale');?></li>
                </ul>
                    <li><?php echo anchor('admin/home/logout','Log Out');?></li>
                </li>
            <?php else: ?>
            <?php redirect('admin/home'); ?>
                <?php endif; ?>
        </nav>
    </div><!-- Left Col End -->
         <div id="content">
         <h1><?= $title ?></h1>
        <p> <?= $content // loads template file ?> </p>
       </div><!-- Content End -->     

        <div id="footer">&copy; <?php echo date('Y');?></div>
        </div> <!-- Wrapper Close -->
    </body>

/*Reset */
html, body, h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }

/* Main CSS */
html,body{
    height:100%;
}
#wrapper{
    width:960px;
    min-height:100%;
    margin: 0 auto;
}
#header{
    background-image:url('../images/header.png');
    background-color:#000;
    height:220px;
}



/*Menu */
nav{
    float:left;
    width:190px;
    height:25%;
    margin:0 0 0 0;
}

nav ul{
    float:left;
    width:190px;
}

nav li a{
    margin-left:10px;
    font-size:14px;
    color:#fff;
    text-decoration:none;
}

nav ul li{
    display:block;
    list-style:none;
    width:190px;
    height:25px;
    position:relative;
    background-image:url('../images/normal.png');
} 

nav ul li ul{
    display:none;
}

nav ul li ul li li{ /* edit page drop down */
    display:none;
}


nav ul li:hover ul{ /*Main Drop Down */
    display:block;
    position:absolute;
    left:190px;
    top:0px;
}

nav ul li ul li:hover li{ /* edit page drop down */
    display:block;
    position:absolute;
    left:0px;
    top:0px;
}

nav li:hover{
    width:100%;
    background-image:url('../images/onclick.png');
}

/*Content */
 #leftCol{
    float:left;
    width:190px;
    background-image:url('../images/metalnavbg.png');
    border: red 1px solid;
}

#content{
    float:left;
    width:990px;
    overflow:auto;
}

#content h1{
    margin: 10px 0 0 0;
    text-indent:25px;
    font-family: 'Josefin Slab', arial, serif;
    font-size:24px;
}

#content p{
    margin:10px 0 0 0;
    text-indent:26px;
}

#footer{
    clear:both;
    background:url('../images/footer.png') no-repeat #000;
    width:100%;
    height:60px;
}

/* Misc*/

#metal{
    float:left;
    margin:160px 0 0 -190px;
    background-image:url('../images/metalnavbg.png');
    height:auto;
    width:190px;
}

/* Text Formatting */

#companyName{
    text-align:center;
    padding-top:45px;
    font-size:35px;
    color:#f0f0ef;
}

#companyQuote{
    text-align:center;
    font-size:18px;
    color:#a5a4a2;
}

/*Forms */
/*General*/

#validation{
    font-weight:bold;
    color:#ff0101;
}

.form{
    width: 400px;
    height:100%;
    padding: 15px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

.form fieldset{
    border:none;
}

#formLayout{
    border:2px solid #000;
}

#formLayout label{
   clear:  both;
    display: block;
}

#formLayout input{
    font-size:12px;
    border: 2px solid #999;
    padding: 6px 8px;
    background-color: #fff;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    color: #000;
    width: 250px;
}



#formLayout .small{
    color:#ff0101;
    display:block;
    font-size:11px;
    font-weight:bold;
    text-align:left;
    width:140px;
}

#formLayout textarea{
    width:250px;
}

#error{

    width:250px;
    height:20px;
    margin:-30px 0 0 270px;
    padding-bottom:10px;
}

#error p{
    color:#ff0101;
    text-align:left;
}
/* Page Edit Form */

#pageEdit .form, #formLayout{
    width: 490px;
    height:100%;
    padding: 15px 55px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

#pageEdit textarea{
    width:480px;
}

#deleteImage{
    float:left;
    margin-left:25px;
    width:100px;
    height:100px;
}

#deleteImage .thumbnail{
    margin:0 auto;
    height:90px;
    width:90px;
}

我已经更新了css，因为我做了一些更改，但现在我被告知我可以使用overflow:auto；在#leftCol和#content上，使页面根据页面上的数据展开

我尝试过这个方法，但它将我的content div推到了nav下面，就像整个#leftCol消失了一样，因为我只剩下

选项

我怎么能这样做

Doctype:HTML5

HTML:

<!DOCTYPE html>
    <head>
    </head>
    <body>
        <div id ="wrapper">
            <div id ="header">
            <h1 id = "companyName"></h1>
            <h4 id = "companyQuote">""</h4>
            </div>
    <div id="leftCol">
     <nav>
            <ul>
            <?php if($this->session->userdata('logged_in')): ?>
                <li><?php echo anchor('admin/dashboard', 'Dashboard');?></li>
                <li><a>Edit Pages<a>
                <?php if(is_array($cms_pages)): ?>
                        <ul>
                            <?php foreach($cms_pages as $page): ?>
                            <li><a href="<?=base_url();?>admin/editpage/index/<?= $page->id ?>/<?php echo url_title($page->name,'dash', TRUE); ?>"><?=$page->name?></a></li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                    </li>
                <li><a>Gallery</a>
                <ul>
                    <li><?php echo anchor('admin/addimage','Add Image');?></li>
                    <li><?php echo anchor('admin/deleteimage','Delete Image');?></li>
                </ul>
                </li>
                <li><a>Sales</a>
                <ul>
                    <li><?php echo anchor('admin/addsale','Add Sale');?></li>
                    <li><a>Edit Sale</a>
                                <?php if(is_array($sales_pages)): ?>
                                        <ul>
                                            <?php foreach($sales_pages as $sale): ?>
                                            <li><a href="<?=base_url();?>admin/editsale/index/<?= $sale->id ?>/<?php echo url_title($sale->name,'dash', TRUE); ?>"><?=$sale->name?></a></li>
                                            <?php endforeach; ?>
                                        </ul>
                                    <?php endif; ?>
                                    </li>
                    </li>
                    <li><?php echo anchor('#','Delete Sale');?></li>
                </ul>
                    <li><?php echo anchor('admin/home/logout','Log Out');?></li>
                </li>
            <?php else: ?>
            <?php redirect('admin/home'); ?>
                <?php endif; ?>
        </nav>
    </div><!-- Left Col End -->
         <div id="content">
         <h1><?= $title ?></h1>
        <p> <?= $content // loads template file ?> </p>
       </div><!-- Content End -->     

        <div id="footer">&copy; <?php echo date('Y');?></div>
        </div> <!-- Wrapper Close -->
    </body>

/*Reset */
html, body, h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }

/* Main CSS */
html,body{
    height:100%;
}
#wrapper{
    width:960px;
    min-height:100%;
    margin: 0 auto;
}
#header{
    background-image:url('../images/header.png');
    background-color:#000;
    height:220px;
}



/*Menu */
nav{
    float:left;
    width:190px;
    height:25%;
    margin:0 0 0 0;
}

nav ul{
    float:left;
    width:190px;
}

nav li a{
    margin-left:10px;
    font-size:14px;
    color:#fff;
    text-decoration:none;
}

nav ul li{
    display:block;
    list-style:none;
    width:190px;
    height:25px;
    position:relative;
    background-image:url('../images/normal.png');
} 

nav ul li ul{
    display:none;
}

nav ul li ul li li{ /* edit page drop down */
    display:none;
}


nav ul li:hover ul{ /*Main Drop Down */
    display:block;
    position:absolute;
    left:190px;
    top:0px;
}

nav ul li ul li:hover li{ /* edit page drop down */
    display:block;
    position:absolute;
    left:0px;
    top:0px;
}

nav li:hover{
    width:100%;
    background-image:url('../images/onclick.png');
}

/*Content */
 #leftCol{
    float:left;
    width:190px;
    background-image:url('../images/metalnavbg.png');
    border: red 1px solid;
}

#content{
    float:left;
    width:990px;
    overflow:auto;
}

#content h1{
    margin: 10px 0 0 0;
    text-indent:25px;
    font-family: 'Josefin Slab', arial, serif;
    font-size:24px;
}

#content p{
    margin:10px 0 0 0;
    text-indent:26px;
}

#footer{
    clear:both;
    background:url('../images/footer.png') no-repeat #000;
    width:100%;
    height:60px;
}

/* Misc*/

#metal{
    float:left;
    margin:160px 0 0 -190px;
    background-image:url('../images/metalnavbg.png');
    height:auto;
    width:190px;
}

/* Text Formatting */

#companyName{
    text-align:center;
    padding-top:45px;
    font-size:35px;
    color:#f0f0ef;
}

#companyQuote{
    text-align:center;
    font-size:18px;
    color:#a5a4a2;
}

/*Forms */
/*General*/

#validation{
    font-weight:bold;
    color:#ff0101;
}

.form{
    width: 400px;
    height:100%;
    padding: 15px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

.form fieldset{
    border:none;
}

#formLayout{
    border:2px solid #000;
}

#formLayout label{
   clear:  both;
    display: block;
}

#formLayout input{
    font-size:12px;
    border: 2px solid #999;
    padding: 6px 8px;
    background-color: #fff;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    color: #000;
    width: 250px;
}



#formLayout .small{
    color:#ff0101;
    display:block;
    font-size:11px;
    font-weight:bold;
    text-align:left;
    width:140px;
}

#formLayout textarea{
    width:250px;
}

#error{

    width:250px;
    height:20px;
    margin:-30px 0 0 270px;
    padding-bottom:10px;
}

#error p{
    color:#ff0101;
    text-align:left;
}
/* Page Edit Form */

#pageEdit .form, #formLayout{
    width: 490px;
    height:100%;
    padding: 15px 55px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

#pageEdit textarea{
    width:480px;
}

#deleteImage{
    float:left;
    margin-left:25px;
    width:100px;
    height:100px;
}

#deleteImage .thumbnail{
    margin:0 auto;
    height:90px;
    width:90px;
}

Doctype:HTML5->Transitional

没有这样的事

问题：

我无法创建根据给定数据量进行扩展的布局

嗯

如何制作图形->金属，使其膨胀

以什么方式扩展，在什么条件下扩展

为什么我将鼠标悬停在我的导航下拉菜单上时会出现重叠->导航似乎不会因为其中的选项数量而变得更宽

您已经为导航元素设置了固定宽度。为什么会期望它扩张

我会将我的#rightCol图形设置为固定宽度吗

这取决于你想要达到的目标。我猜你可能不需要

我甚至需要#对吗

可能不会

我应该把宽度设为960还是990px

为你的布局命名一些目标

Doctype:HTML5->Transitional

没有这样的事

问题：

我无法创建根据给定数据量进行扩展的布局

嗯

如何制作图形->金属，使其膨胀

以什么方式扩展，在什么条件下扩展

为什么我将鼠标悬停在我的导航下拉菜单上时会出现重叠->导航似乎不会因为其中的选项数量而变得更宽

您已经为导航元素设置了固定宽度。为什么会期望它扩张

我会将我的#rightCol图形设置为固定宽度吗

这取决于你想要达到的目标。我猜你可能不需要

我甚至需要#对吗

可能不会

我应该把宽度设为960还是990px

列出布局的一些目标。

什么是doctype（X）HTML（4 | 5）（严格的|过渡|框架集）？嗯……很确定没有“过渡”HTML 5 doctype。HTML5只是HTML5。您的标记是无效的，例如在

nav

的末尾没有关闭

ul

，请先尝试修复它。您的doctype（X）HTML（4 | 5）（严格的|过渡|框架集）是什么？嗯……非常确定没有“过渡”HTML5 doctype。HTML5只是HTML5。您的标记无效，例如，

nav

末尾没有关闭

ul

，请先尝试修复该标记。