HTML / CSS макет

Question

HTML / CSS макет

0

У меня (возможно) очень простой вопрос HTML/CSS:

Я использую asp.net MVC 4 Я должен разработать простой веб-сайт, который выглядит следующим образом:

Пример страницы 1:
Пример страницы 2:

На каждой странице должен быть значок заголовка (это логотип сайта) и ссылки внизу. Единственное, что меняется между страницами, это область содержимого. Ширина содержимого отличается от страницы к странице. Весь макет должен быть центрирован (как показано на примерах дизайна).

Поскольку для всех страниц на веб-сайте есть общий заголовок и нижний колонтитул, я решил создать файл макета, например:

...
    <body id="index" class="home">

        <header id="header" class="body">
            here comes a logo
        </header>

        <section id="content" class="body">
            @RenderBody()
        </section>

        <footer id="footer" class="body">
            <nav>
                <ul id="menu">
                   here the links
                </ul>
            </nav>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

Проблема: я не знаю, как добиться желаемого внешнего вида. Я принял правильное решение о размещении заголовка и нижнего колонтитула в общем файле макета?

Я не знаю HTML, но я хорошо знаю XAML. В XAML я бы сделал следующее:

<Grid>
 <Grid.ColumnDefinitions>
   <Column Width="*"/>
   <Column Width="auto"/>
   <Column Width="*"/>
 </Grid.ColumnDefinitions>
</Grid>

Помещение содержимого в столбец 1 дало бы мне желаемое поведение (средний столбец примет ширину его дочернего элемента, в то время как левый и правый столбцы будут занимать все левое пространство на экране, разделенное поровну, тем самым центрируя содержимое на середине).

благодаря

Illidan 14 нояб. 2013, в 16:43

Источник

Теги:

html

css

asp.net

asp.net-mvc

4 ответа

Ещё вопросы

Mathias Rechtzigel · Answer 1 · 2013-11-14T13-54-00.000Z

Оберните свои элементы в div, который имеет заданную ширину и следующие стили: margin:0 auto;

HTML:

<div id="widthContainer">
    <div id="header">
        <div id="logo">Logo</div>
    </div>
    <div id="mainContent">mainContent</div>
    <div id="footer">footer</div>
</div>

CSS

#widthContainer{width:800px;height:1000px;background-color:red;margin:0 auto;}
#header{width:100%;height:200px;background-color:blue;margin-bottom: 50px;}
#logo{width:200px;height:200px;background-color:green;}
#mainContent{position:relative;width:100%;height:500px;background-color:pink;margin-bottom: 50px;}
#footer{position:relative;width:100%;height:300px;background-color:green;margin-bottom: 50px;}

Вот пример скрипки.

Я пытался сделать то, что ты предлагаешь, но это не дает мне желаемого эффекта. Я хотел, чтобы ширина widthContainer соответствовала ширине содержимого внутри mainContent. В вашем примере (если я что-то упустил) ширина всегда составляет 800 пикселей. Кстати - спасибо за показ jsfiddle - выглядит очень полезно.
Какова ширина основного контента? Просто установите ширину widthContainer и установите значение mainContent width 100% (какой ширины вы бы хотели.) Вы можете редактировать JSFiddle в соответствии с вашими потребностями, это всего лишь пример, а не конечный продукт, который вы будете использовать.
Я отредактировал свой вопрос, чтобы сделать его более понятным. Спасибо
Мой пример все еще работает в этой ситуации. Просто измените ширину и содержимое контейнера со страницы на страницу. Очень просто.

Ed Charbeneau · Answer 2 · 2013-11-14T14-16-00.000Z

Если вы не знакомы с HTML и CSS, я бы предложил начать с такой структуры, как Foundation. Фонд предоставит вам сетку CSS, которая упростит понимание макетов страниц.

Существует пакет NuGet с простыми инструкциями по установке. Вы можете узнать больше здесь: http://responsivemvc.net/foundation

Здесь вы можете получить шаблоны для разных раскладок: http://foundation.zurb.com/templates.php

Ravi Hamsa · Answer 3 · 2013-11-14T14-24-00.000Z

создать обертку вокруг всех контейнеров со стилем

  width:960px; /* or whatever you want */
  margin:0 auto;

каждый div внутри этой обертки будет выровнен по центру.

Я отредактировал свой вопрос, чтобы сделать его более понятным. Спасибо
Это именно то, что я понял из вашего предыдущего вопроса. Возможно, ответ был слишком кратким.

MightyLampshade · Answer 4 · 2013-11-14T14-06-00.000Z

Насколько я знаю, ваш CSS был бы чем-то основным в соответствии с этим. Вам нужно будет изменить их из классов в любой тип CSS, который вы хотите использовать (мне нравятся классы, если это то, что они называются: |). Если вы собираетесь использовать CSS-классы, вы также измените "класс" на свои элементы, чтобы они соответствовали каждому имени.

Кроме того, свойство float в заголовке, с которым вы можете обойтись, может исказить страницу. Это я не уверен.

.body {
    display:block;
    width: 1080px; /* your choice*/
    margin: 0 auto;
    padding: 0;
}
.header {
    display:block;
    float:left;
}
.content {
    display:block;
}
.footer {
    display:block;
}

зачем показывать блок для контента и нижнего колонтитула? разве они уже не блокируют? Также вы пропустили очистку поплавка.