CSS 'float: right;' проблемы

У меня в настоящее время есть простой заголовок, настроенный в HTML, и я использую CSS для его стилизации. Я создал несколько стилей: «#header» и «#header #right». Когда я использую float: right; для второго стиля, о котором я упоминал, он почти полностью перемещает текст под заголовком.CSS 'float: right;' проблемы

Код:

index.html:

<html> 
<link rel="icon" type="image/png" href="images/favicon.png"> 
<link href='main.css' type='text/css' rel=Stylesheet> 
<head> 
<title>FriendSub</title> 
</head> 
<body> 

<div id='header'> 
<font size='+3'>FriendSub &nbsp; &nbsp;</font> 
<a href='index.php'>Home</a> | 
<a href=''>Subscribers</a> | 
<a href=''>Subscriptions</a> 
<div id='right'> 
    <p><a href=''>Log in</a> | <a href='register.php'>Register</a></p></div></div> 
</body> 
</html>

main.css:

@charset "utf-8"; 
/* CSS Document */ 

#header { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 24px; 
    background-color: #093; 
    border-top-left-radius: 18; 
    border-top-right-radius: 18; 
    width: 96%; 
    height: 58px; 
    margin: auto; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    padding-left: 14px; 
    padding-right: 14px; 
    color: #FFF;  
    font-weight: bold; 
    text-shadow: #000 0.1em 0.1em 0.2em; 
} 

#header a { 
    color: #FFF; 
    text-decoration: none; 
    text-shadow: #000 0.1em 0.1em 0.2em; 
} 

#header a:hover { 
    color: #CCC; 
} 

#header #right { 
    float: right; 
    width: 220px; 
    background-color: #093; 
} 

#content { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    background-color: #CCC; 
    width: 1000; 
    height: 58px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 14px; 
    padding-left: 14px; 
    padding-right: 14px; 
    padding-bottom: 600; 
    font-weight: bold; 
    border-bottom-left-radius: 18; 
    border-bottom-right-radius: 18; 
    line-height: 1%; 
}

JSFiddle здесь: http://jsfiddle.net/aKtep/

источник

2012-05-25 PJCH

Это может помочь добавить скриншот того, что вы видите, и результат, который вы хотите. –

попробуйте добавить <div style='clear:both'></div> сразу после закрытия #right и посмотреть, что произойдет

источник

2012-05-25 18:06:24 Rodolfo

Спасибо! Это работало лучше всего. – PJCH

Удалите тэг p из ссылки «Вход/Регистрация», измените #header #right, чтобы добавить верхнюю часть: 10px; Вы также используете слишком много divs, когда вам действительно не нужно (divitus)

источник

2012-05-25 18:06:38

Это тоже помогло. Спасибо – PJCH

Необходимо указать ширину единиц для вашего контейнера #header, который будет соответствовать всему содержанию.

Все, что я сделал here был изменить #header ширины от 96% до 960px

источник

2012-05-25 18:08:16

Я предполагаю, что я не уверен на 100% от того, что вы просите, но это звучит как ваш нормальный заголовок нажав правый заголовок вниз под ним , Из того, что я вижу, это может иметь отношение к вашему контейнеру заголовка, имеющему ширину 96%. Тогда #right #header имеет ширину пикселей, а исходный контейнер заголовка может не иметь достаточно места для этого количества пикселей. Попробуйте изменить ширину #header #right на%

Слово совета, не используйте ID так много. Вы создаете очень высокую специфичность, которая может быть болью для вас позже.

источник

2012-05-25 18:08:25 PL3X

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

источник

2012-05-25 18:10:47 AlexMA

Я рекомендую вам читать плавающие элементы, если у вас есть время, однако, поскольку мое объяснение упрощает вещи. – AlexMA

CSS 'float: right;' проблемы

ответ

Смежные вопросы